@font-face {
  font-family: "Pattanakarn";
  src: url("assets/fonts/Pattanakarn-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pattanakarn";
  src: url("assets/fonts/Pattanakarn-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pattanakarn";
  src: url("assets/fonts/Pattanakarn-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --bg: #141210;
  --surface: #1C1A14;
  --surface-2: #242119;
  --surface-3: #2b271d;
  --brand-print: #C75A2B;
  --accent: #C98562;
  --accent-strong: #B87352;
  --action-primary: #9B4323;
  --action-primary-hover: #8F3D1D;
  --focus-ring: #C98562;
  --focus-soft: rgba(201, 133, 98, 0.14);
  --text: #E6D9C6;
  --muted: #B8AEA0;
  --border: rgba(184, 174, 160, 0.12);
  --border-strong: rgba(184, 174, 160, 0.26);
  --danger: #e58a7e;
  --font-brand: "Pattanakarn", Arial, Helvetica, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --app-height: 100dvh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius-panel: 16px;
  --radius-card: 12px;
  --radius-control: 9px;
  --radius-status: 999px;
  --sidebar-expanded: clamp(284px, 19vw, 304px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow: hidden; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 22% -8%, rgba(184, 174, 160, 0.05), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button {
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.brand-wordmark {
  font-family: var(--font-brand);
  font-weight: 800;
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 0.94;
  letter-spacing: 0.015em;
}

.auth-screen {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

.auth-screen.is-entering .auth-shell,
.auth-screen:not([hidden]) .auth-shell {
  animation: authScreenIn 190ms cubic-bezier(.2,.8,.2,1) both;
}
.app-shell.is-entering .topbar,
.app-shell.is-entering .chat-scroll,
.app-shell.is-entering .composer {
  animation: appSurfaceIn 190ms cubic-bezier(.2,.8,.2,1) both;
}
.auth-card.is-switching {
  animation: authCardSwitch 150ms ease both;
}
.auth-submit.is-loading {
  position: relative;
  cursor: progress;
  padding-left: 42px;
}
.auth-submit.is-loading::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
.auth-shell {
  width: min(100%, 430px);
  min-width: 0;
  margin: auto;
}
.auth-brand {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.auth-brand > div { min-width: 0; }
.auth-brand img,
.side-brand img,
.empty-logo img {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  object-fit: cover;
  background: rgba(184, 174, 160, 0.08);
}
.auth-brand p,
.side-brand p,
.topbar p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.auth-card {
  background: linear-gradient(180deg, rgba(28,26,20,0.98), rgba(20,18,16,0.96));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.32);
}
.auth-legal,
.side-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.auth-legal { margin-top: 16px; }
.auth-legal a,
.side-legal a {
  color: inherit;
  text-decoration: none;
}
.auth-legal a:hover,
.side-legal a:hover { color: var(--accent); }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: rgba(230,217,198,0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 18px;
}
.auth-tab {
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.auth-tab.is-active {
  background: rgba(184,174,160,0.13);
  color: var(--accent);
}
.auth-form { display: grid; gap: 15px; }
.field {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
.field.compact { max-width: 180px; }
.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background-color: rgba(20,18,16,0.78);
  color: var(--text);
  outline: none;
  padding: 13px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.input:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px var(--focus-soft);
  background-color: rgba(20,18,16,0.96);
}
.input[aria-invalid="true"] {
  border-color: rgba(229,138,126,0.68);
  box-shadow: 0 0 0 3px rgba(229,138,126,0.10);
}
.field-error {
  position: static;
  max-width: 100%;
  margin: -2px 0 0 2px;
  border: 0;
  background: transparent;
  color: #eaa096;
  box-shadow: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}
.settings-panel select.input {
  appearance: none;
  -webkit-appearance: none;
  height: 45px;
  line-height: normal;
  padding: 0 42px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8afa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 15px;
}
.settings-panel select.input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8afa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 15px;
}
.settings-panel select.input::-ms-expand { display: none; }
.legal-checks {
  position: relative;
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
}
.legal-checks label { display: flex; gap: 8px; align-items: flex-start; }
.legal-checks input { accent-color: var(--accent); margin-top: 2px; }
.legal-checks.has-field-error input {
  outline: 2px solid rgba(229,138,126,0.55);
  outline-offset: 2px;
}
.legal-checks .field-error {
  margin-top: 0;
  color: #eaa096;
}
.reset-fields { display: grid; gap: 14px; }
.reset-meta {
  display: grid;
  gap: 4px;
  min-height: 0;
  border: 1px solid rgba(184,174,160,0.14);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: rgba(20,18,16,0.48);
  padding: 9px 11px;
}
.reset-meta:empty,
.reset-meta[hidden] { display: none !important; }
.reset-status,
.reset-expiry {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.reset-status {
  color: var(--text);
  font-weight: 700;
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  min-height: 20px;
}
.text-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}
.text-link:hover { color: var(--text); }
.text-link:disabled {
  color: rgba(184,174,160,0.58);
  cursor: default;
}
.primary-btn,
.send-btn,
.plan-card button {
  border: 0;
  border-radius: 16px;
  background: var(--action-primary);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
.primary-btn { padding: 13px 16px; margin-top: 4px; }
.primary-btn:hover,
.plan-card button:hover {
  transform: translateY(-1px);
  background: var(--action-primary-hover);
}
.primary-btn:disabled,
.send-btn:disabled,
.plan-card button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.form-message,
.modal-message,
.help-text {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Sem reservar espaco vazio abaixo das acoes quando nao ha mensagem:
   fecha a lacuna no card de login (padding inferior igual ao topo) e some
   assim que aparece um aviso. Vale para login, cadastro, reset e verificacao. */
.auth-form .form-message:empty { display: none; }
.form-message.is-error,
.modal-message.is-error { color: var(--danger); }
.form-message.is-server-unavailable {
  min-height: 0;
  border: 1px solid rgba(229,138,126,0.34);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: rgba(20,18,16,0.72);
  color: var(--text);
  padding: 11px 13px;
  box-shadow: 0 14px 42px rgba(0,0,0,0.18);
}

.app-shell {
  height: var(--app-height);
  display: grid;
  grid-template-columns: var(--sidebar-expanded) minmax(0, 1fr);
  min-width: 0;
  transition: grid-template-columns 200ms ease;
}
.sidebar {
  height: var(--app-height);
  max-height: var(--app-height);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(20,18,16,0.92);
  border-right: 1px solid var(--border);
  padding: max(18px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Sidebar em coluna: topo e rodapé fixos, histórico com rolagem própria. */
.side-brand,
.side-engine-nav,
.new-chat-btn,
.install-app-btn,
.usage-card,
.settings-shortcut,
.account-card,
.side-legal {
  flex: 0 0 auto;
}
.side-section {
  flex: 1 1 0;
}
.side-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 3px 2px 7px;
  overflow: visible;
}
.side-brand > :is(div, a) { min-width: 0; overflow: visible; padding-block: 3px 1px; }
.side-brand-home {
  display: block;
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
}
.side-brand-home:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.side-brand .brand-wordmark {
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-block-start: .08em;
}
.sidebar-collapse {
  margin-left: 0;
  flex: 0 0 auto;
}
.side-close { margin-left: auto; display: none !important; }
.side-engine-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(184,174,160,.20);
  border-radius: 14px;
  background: rgba(28,26,20,.82);
}
.side-engine-nav button {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #D8CDBE;
  font: 700 11px/1.1 var(--font-body);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.side-engine-nav button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.side-engine-nav button:hover,
.side-engine-nav button:focus-visible {
  color: var(--text);
  border-color: rgba(201,133,98,.34);
  background: rgba(201,133,98,.075);
}
.side-engine-nav button.is-active {
  color: var(--text);
  border-color: rgba(201,133,98,.42);
  background: linear-gradient(180deg, rgba(201,133,98,.13), rgba(184,174,160,.09));
  box-shadow: inset 0 1px rgba(230,217,198,.055);
}
.side-engine-nav button.is-active svg { color: var(--accent); }
.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(230,217,198,0.03);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--accent);
  background: rgba(184,174,160,0.08);
}
.new-chat-btn {
  min-height: 42px;
  border: 1px solid rgba(201,133,98,.34);
  border-radius: 14px;
  background: rgba(36,33,25,.94);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  cursor: pointer;
}
.new-chat-btn svg { color: var(--accent); }
.new-chat-btn:hover { border-color: rgba(201,133,98,.50); background: rgba(201,133,98,.10); }
.install-app-btn {
  min-height: 40px;
  border: 1px solid rgba(184,174,160,.28);
  border-radius: 14px;
  background: rgba(28,26,20,.88);
  color: #E4DACE;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}
.install-app-btn:hover { border-color: rgba(201,133,98,.40); background: rgba(201,133,98,.08); color: var(--text); }
.install-app-btn svg { width: 18px; height: 18px; }
.install-app-btn svg { color: var(--accent); }
.side-section {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.history-filter-btn {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 600 10px/1 var(--font-body);
  cursor: pointer;
}
.history-filter-btn:hover,
.history-filter-btn:focus-visible,
.history-filter-btn[aria-pressed="true"] {
  color: var(--text);
  border-color: rgba(201,133,98,.34);
  background: rgba(201,133,98,.075);
}
.side-icon-trigger {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(230,217,198,0.03);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.side-icon-trigger:hover {
  border-color: var(--border-strong);
  color: var(--accent);
  background: rgba(184,174,160,0.08);
}
.history-collapsed-trigger { display: none; }
.side-label {
  color: #CFC2B1;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 8px;
}
.history-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 2px 2px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-list::-webkit-scrollbar { width: 8px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,0.34);
  border-radius: 999px;
}
.history-list:hover::-webkit-scrollbar-thumb { background: rgba(184,174,160,0.52); }
.history-list { scrollbar-width: thin; scrollbar-color: rgba(184,174,160,0.42) transparent; }
.history-empty {
  padding: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.history-item {
  width: 100%;
  min-height: 42px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 10px;
  overflow: hidden;
}
.history-main {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.history-item strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item small { display: block; margin-top: 4px; font-size: 11px; }
.history-actions {
  width: 62px;
  min-width: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  opacity: .55;
  transition: opacity 160ms ease;
}
.history-item:hover .history-actions,
.history-item:focus-within .history-actions { opacity: 1; }
.history-actions button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(230,217,198,0.03);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.history-actions button:hover {
  border-color: var(--border);
  color: var(--accent);
}
.history-actions button.is-danger:hover,
.history-actions button.is-danger:focus-visible {
  color: var(--danger);
  border-color: rgba(229,138,126,.3);
}
.history-item.history-item--one-action {
  grid-template-columns: minmax(0, 1fr) 28px;
}
.history-item--one-action .history-actions {
  width: 28px;
  min-width: 28px;
}
.history-item.is-archived { opacity: .86; }
.history-actions svg { width: 15px; height: 15px; }
.history-item:hover,
.history-item.is-active {
  border-color: var(--border);
  background: rgba(184,174,160,0.07);
}
.usage-card,
.account-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(28,26,20,0.82);
  padding: 14px;
}
.usage-card { padding: 10px 12px 12px; }
.usage-head,
.usage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.usage-head strong { color: var(--text); font-family: var(--font-brand); }
.plan-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plan-shortcut svg { width: 16px; height: 16px; }
.usage-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(230,217,198,0.06);
  overflow: hidden;
  margin: 10px 0;
}
.usage-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
}
.account-card {
  padding: 6px;
  border-radius: 16px;
}
.account-card { position: relative; }
.account-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}
.account-button:hover { background: rgba(184,174,160,0.07); }
.account-button.is-open { background: rgba(184,174,160,.09); color: var(--text); }
.account-button > svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}
.account-button.is-open > svg { transform: rotate(180deg); }
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(184,174,160,0.15);
  color: var(--accent);
  line-height: 1;
  padding-bottom: 2px;
  font-weight: 800;
}
.account-button strong,
.account-button small {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-button small { color: var(--muted); margin-top: 2px; }
.account-menu-email {
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  word-break: break-all;
}
.account-menu-email[hidden] { display: none; }

.account-menu {
  position: absolute;
  z-index: 95;
  left: 0;
  right: auto;
  bottom: calc(100% + 8px);
  width: min(100%, calc(100vw - 28px));
  min-width: 0;
  max-height: calc(var(--app-height) - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(28,26,20,.98);
  box-shadow: 0 18px 54px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  transform-origin: bottom left;
}
.account-menu.is-entering { animation: accountMenuIn 170ms cubic-bezier(.2,.8,.2,1) both; }
.account-menu.is-closing { animation: accountMenuOut 150ms ease both; pointer-events: none; }
@keyframes accountMenuIn {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes accountMenuOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(5px) scale(.99); }
}
.account-menu button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: 500 13px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.account-menu button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}
.account-menu button:hover,
.account-menu button:focus-visible {
  background: rgba(184,174,160,.09);
  color: var(--accent);
  outline: 0;
}
.account-menu button:hover svg,
.account-menu button:focus-visible svg { color: var(--accent); }
.account-menu-separator {
  display: block;
  height: 1px;
  margin: 5px 0;
  background: var(--border);
}
.account-menu .account-menu-logout { color: #ffb0a5; }

.workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  background: var(--bg);
}
.topbar {
  min-height: 72px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
}
.menu-btn { display: none; }
.topbar h1 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 19px;
  letter-spacing: 0;
}
.maintenance-banner {
  /* Caixa encolhe ate o conteudo (mensagem varia: root ve texto maior).
     Sem isso a moldura fixa de 920px deixava um vazio grande a direita. */
  width: fit-content;
  max-width: min(920px, calc(100% - 44px));
  justify-self: center;
  margin: 14px auto 0;
  border: 1px solid rgba(184,174,160,0.28);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(38,32,20,0.96), rgba(19,17,15,0.97));
  color: var(--text);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  box-shadow: 0 18px 54px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,246,232,0.025) inset;
}
.maintenance-banner[hidden] {
  display: none !important;
}
.maintenance-banner strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #f4c259;
  border: 1px solid rgba(184,174,160,0.20);
  border-radius: 999px;
  background: rgba(184,174,160,0.09);
  padding: 4px 8px;
  font-family: var(--font-brand);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.maintenance-banner span {
  color: #d4c9ba;
  font-size: 14px;
  min-width: 0;
  line-height: 1.35;
}
.maintenance-banner.is-root-visible {
  border-color: rgba(184,174,160,0.36);
  background:
    linear-gradient(135deg, rgba(45,35,17,0.97), rgba(18,16,14,0.97));
}
.chat-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 34px 22px 24px;
}
.chat-scroll:focus { outline: none; }
.empty-state {
  width: min(760px, 100%);
  margin: 8vh auto 0;
  text-align: center;
}
.empty-logo img { width: 58px; height: 58px; border-radius: 20px; }
.empty-state h2 {
  margin: 18px 0 8px;
  font-family: var(--font-brand);
  font-size: clamp(31px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}
.empty-state p {
  margin: 0 auto;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.65;
}
.example-chips {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.example-chips button:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px);
}
.example-chips button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(28,26,20,0.9);
  color: var(--text);
  padding: 11px 18px;
  cursor: pointer;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}
.example-chips button:hover {
  border-color: var(--border-strong);
  background: rgba(184,174,160,0.08);
}
.messages {
  width: min(860px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.message-row {
  display: flex;
  min-width: 0;
}
.message-row.user {
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
}
.user-bubble {
  max-width: min(680px, 84%);
  border-radius: 10px;
  background: var(--accent);
  color: #141210;
  padding: 13px 16px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: default;
  touch-action: auto;
}
.user-bubble:focus-visible {
  outline: 2px solid rgba(184,174,160,0.72);
  outline-offset: 4px;
}
.message-row.user.is-editing {
  align-items: stretch;
}
.inline-message-editor {
  width: min(680px, 84%);
  align-self: flex-end;
  display: grid;
  gap: 10px;
}
.inline-message-editor-input {
  width: 100%;
  min-height: 96px;
  max-height: min(260px, 42dvh);
  resize: none;
  overflow-y: auto;
  border: 1px solid rgba(184,174,160,0.38);
  border-radius: 12px;
  background: rgba(28,26,20,0.98);
  color: var(--text);
  padding: 13px 15px;
  line-height: 1.55;
  outline: 0;
  box-shadow: 0 14px 42px rgba(0,0,0,0.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,0.46) rgba(184,174,160,0.045);
}
.inline-message-editor-input::-webkit-scrollbar { width: 8px; }
.inline-message-editor-input::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.inline-message-editor-input::-webkit-scrollbar-track { background: rgba(184,174,160,0.045); border-radius: 999px; }
.inline-message-editor-input::-webkit-scrollbar-thumb { background: rgba(184,174,160,0.46); border: 2px solid transparent; border-radius: 999px; background-clip: content-box; }
.inline-message-editor-input:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-soft), 0 14px 42px rgba(0,0,0,0.22);
}
.inline-message-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-message-editor-actions .mini-btn {
  min-height: 38px;
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .user-bubble {
    cursor: pointer;
    touch-action: manipulation;
  }
  .inline-message-editor {
    width: min(92%, 680px);
  }
}
@media (max-width: 420px) {
  .inline-message-editor {
    width: 100%;
  }
  .inline-message-editor-actions {
    justify-content: stretch;
  }
  .inline-message-editor-actions .mini-btn,
  .inline-message-editor-actions .text-link {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.assistant-message {
  display: block;
  width: 100%;
}
.assistant-body {
  min-width: 0;
  padding-top: 3px;
}
.nota-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(28,26,20,0.82);
  padding: 14px;
  margin: 0 0 18px;
}
.nota-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
}
.nota-title strong { color: var(--text); font-family: var(--font-brand); font-size: 15px; }
.nota-grid {
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(0,0.94fr) minmax(0,1fr);
  gap: 10px;
}
.nota-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(20,18,16,0.72);
  border: 1px solid rgba(184,174,160,0.08);
  padding: 13px 14px;
  min-height: 86px;
  text-align: center;
  min-width: 0;
}
.nota-cell span {
  display: block;
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  margin-bottom: 7px;
}
.nota-cell strong {
  display: block;
  width: 100%;
  color: var(--text);
  font-family: var(--font-brand);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nota-cell:first-child strong { color: var(--accent); }
.response {
  color: var(--text);
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.response-block {
  margin: 0 0 16px;
  color: var(--text);
}
.response-heading {
  margin: 24px 0 10px;
  color: var(--text);
  font-weight: 700;
}
.response-heading:first-child { margin-top: 0; }
.response-metric {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184,174,160,0.12);
}
.response-metric span {
  color: var(--muted);
  min-width: 0;
}
.response-metric strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-brand);
  font-size: 18px;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}
.response-metric--accent strong { color: var(--accent); }
.response-divider {
  height: 1px;
  background: rgba(184,174,160,0.18);
  margin: 22px 0;
}
.response-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 18px;
}
.response-item {
  display: grid;
  grid-template-columns: 12px minmax(0,1fr);
  gap: 6px;
  margin: 0;
}
.response > .response-item {
  grid-template-columns: 12px minmax(0,1fr);
  gap: 6px;
  margin: 8px 0;
}
.response-item span:first-child {
  color: var(--accent);
  width: 12px;
  text-align: left;
}
.response-note {
  margin: 16px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
}
.response-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}
.response-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid rgba(184,174,160,0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.response-chip:hover,
.response-chip:focus-visible {
  border-color: var(--border-strong);
  background: rgba(184,174,160,0.07);
  color: var(--accent);
}
@media (max-width: 640px) {
  .response-metric {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .response-metric strong { text-align: left; }
  .response-heading { margin-top: 20px; }
}
.message-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}
.budget-actions {
  gap: 8px;
  margin-top: 12px;
}
.message-action-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(230,217,198,0.03);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.message-action-icon svg,
.message-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-icon:hover,
.message-action-icon:focus-visible {
  border-color: var(--border-strong);
  color: var(--accent);
  background: rgba(184,174,160,0.08);
}
.message-action-icon.is-done {
  border-color: var(--accent);
  background: var(--accent);
  color: #141210;
}
.share-action {
  display: none;
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .share-action {
    display: grid;
  }
}
.budget-actions .help-text {
  align-self: center;
  margin-left: 2px;
}
.user-message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.message-row.user:hover .user-message-actions,
.message-row.user:focus-within .user-message-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.user-message-actions button {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.user-message-actions button:hover,
.user-message-actions button:focus-visible {
  border-color: var(--border);
  background: rgba(230,217,198,0.03);
  color: var(--accent);
}
.user-message-actions button.is-done {
  border-color: var(--accent);
  background: var(--accent);
  color: #141210;
}
.user-message-actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .user-message-actions { display: none; }
}
.message-row.user {
  position: relative;
  z-index: 1;
}
.message-row.user.is-menu-open { z-index: 24; }
.message-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(260px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(28,26,20,0.98);
  box-shadow: 0 18px 48px rgba(0,0,0,0.38);
  padding: 6px;
  z-index: 140;
}
.message-menu.is-above {
  top: auto;
  bottom: calc(100% + 8px);
}
.message-menu button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0,1fr) 22px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.message-menu button:hover,
.message-menu button:focus-visible {
  background: rgba(184,174,160,0.09);
  color: var(--accent);
}
.message-menu span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mini-btn,
.secondary-btn,
.danger-btn,
.logout-line {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(230,217,198,0.03);
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
}
.mini-btn:hover,
.secondary-btn:hover,
.logout-line:hover { border-color: var(--border-strong); color: var(--accent); }
.danger-btn { color: var(--danger); }
.loading-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--muted);
}
.assistant-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: var(--muted);
  font-size: 14px;
}
.assistant-loading [data-loading-label] {
  display: inline-block;
  min-width: min(170px, 60vw);
  transition: opacity 140ms ease;
}
.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s infinite ease-in-out;
}
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .28; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.composer {
  width: min(720px, calc(100% - 44px));
  margin: 0 auto 18px;
  border: 1px solid var(--border-strong);
  border-radius: 30px;
  background: rgba(28,26,20,0.98);
  padding: 16px 16px 14px 20px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.28);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "input submit"
    "meta submit";
  column-gap: 14px;
  row-gap: 10px;
}
.composer textarea {
  grid-area: input;
  min-height: 52px;
  max-height: 260px;
  resize: none;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  padding: 10px 0 6px 0;
  line-height: 1.55;
  overflow-y: hidden;
  scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { width: 0; height: 0; }
.composer textarea.is-scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,0.34) transparent;
}
.composer textarea.is-scrollable::-webkit-scrollbar { width: 5px; }
.composer textarea.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.composer textarea.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,0.34);
  border-radius: 999px;
}
.composer textarea:focus {
  box-shadow: none;
  background: transparent;
}
body.maintenance-lock .composer {
  opacity: .78;
}
body.maintenance-lock .composer textarea,
body.maintenance-lock .voice-btn,
body.maintenance-lock .send-btn {
  cursor: not-allowed;
}
body.maintenance-lock .composer textarea::placeholder {
  color: #ffcf8a;
}
.composer-actions {
  display: contents;
}
.composer-submit-actions {
  grid-area: submit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  align-self: center;
  justify-self: end;
}
.composer-meta {
  grid-area: meta;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.composer-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.composer-quick-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.composer-quick-actions:empty { display: none; }
.composer-tool {
  border: 1px solid rgba(184,174,160,0.18);
  border-radius: 999px;
  background: rgba(184,174,160,0.07);
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
  white-space: nowrap;
}
.composer-tool:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.composer-tool:disabled:hover {
  color: var(--muted);
  border-color: rgba(184,174,160,.18);
  background: rgba(184,174,160,.07);
}
.composer-quick {
  color: var(--text);
  background: rgba(230,217,198,.025);
}
.composer-tool:hover {
  border-color: var(--border-strong);
  color: var(--accent);
  background: rgba(184,174,160,0.11);
}
.composer-tool--engine {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.composer-tool--engine::after { display: none !important; content: none !important; }
.composer-tool--engine:hover {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}
.composer-tool--engine svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.composer-tool--region {
  color: var(--accent);
  border-color: var(--border-strong);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 11.5px;
}
.composer-tool[data-clear-input] {
  font-weight: 600;
}
.composer-meta span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  align-self: center;
}
.send-btn {
  grid-area: auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20,18,16,0.68);
  backdrop-filter: blur(3px);
}
@media (min-width: 901px) {
  .mobile-overlay { display: none !important; }
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20,18,16,0.72);
  display: grid;
  place-items: center;
  padding: 18px;
}
/* Polimento: resposta e composer compartilham o mesmo eixo visual. */
.workspace {
  --conversation-width: 720px;
}

.messages {
  width: min(var(--conversation-width), 100%);
}

.message-row {
  width: 100%;
}

.user-bubble {
  max-width: min(680px, 100%);
}

.assistant-body,
.nota-card,
.response,
.message-actions {
  max-width: 100%;
}

@media (min-width: 901px) {
  .assistant-message {
    display: block;
    width: 100%;
  }

  .assistant-body {
    width: 100%;
    padding-top: 3px;
  }
}

@media (max-width: 900px) {
  .assistant-message {
    display: block;
  }
}

/* Painel Root: controles secundarios compactos e expansoes previsiveis. */
.root-utility-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.root-advanced-ops {
  display: contents;
}

.root-op-section.root-op-section--advanced,
.root-secondary-section {
  min-height: 0;
  padding: 0;
  overflow: clip;
  align-self: start;
}

.root-op-section--advanced[open],
.root-secondary-section[open] {
  grid-column: 1 / -1;
}

.root-op-section--advanced > summary,
.root-secondary-section > summary {
  box-sizing: border-box;
  min-height: 54px;
  margin: 0;
  padding: 0 15px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, background-color 160ms ease;
}

.root-op-section--advanced > summary::-webkit-details-marker,
.root-secondary-section > summary::-webkit-details-marker {
  display: none;
}

.root-op-section--advanced > summary::after,
.root-secondary-section > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .72;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform 160ms ease, opacity 160ms ease;
}

.root-op-section--advanced[open] > summary,
.root-secondary-section[open] > summary {
  margin-bottom: 0;
  color: var(--accent);
  background: rgba(184,174,160,.055);
  border-bottom: 1px solid var(--border);
}

.root-op-section--advanced[open] > summary::after,
.root-secondary-section[open] > summary::after {
  opacity: 1;
  transform: rotate(225deg) translate(-1px, 1px);
}

.root-secondary-section > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-secondary-section > summary small {
  flex: 0 0 auto;
  font-size: 11px;
  white-space: nowrap;
}

.root-op-section--advanced > .root-op-buttons,
.root-secondary-section > .root-regions {
  margin: 0;
  padding: 12px;
  animation: rootDisclosureIn 170ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rootDisclosureIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* "Mais acoes" permanece alinhado aos botoes primarios; somente a caixa de
   comandos ocupa a linha seguinte. */
.root-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  line-height: 1.2;
  vertical-align: middle;
}

.root-more-toggle > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;
}

.root-more-toggle > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
  transition: transform 160ms ease, opacity 160ms ease;
}

.root-more-toggle.is-open {
  color: var(--accent);
  border-color: var(--border-strong);
  background: rgba(184,174,160,.10);
}

.root-more-toggle.is-open > svg {
  opacity: 1;
  transform: rotate(180deg);
}

.root-more-panel {
  box-sizing: border-box;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(14,13,11,.42);
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1);
}

.root-more-panel[hidden] {
  display: none !important;
}

.root-more-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.root-more-panel-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* Tooltip Coringa. O title nativo e convertido para data-tooltip pelo JS. */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip]:not(.sidebar [data-tooltip]) {
    position: relative;
  }

  [data-tooltip]:not(.sidebar [data-tooltip])::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 100;
    width: max-content;
    max-width: min(220px, 70vw);
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0,0,0,.34);
    font: 600 12px/1.25 var(--font-body);
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity 140ms ease, transform 140ms ease;
  }

  [data-tooltip]:not(.sidebar [data-tooltip]):hover::after,
  [data-tooltip]:not(.sidebar [data-tooltip]):focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Todos os containers rolaveis usam a mesma barra dourada do produto. */
.region-dd-list,
.region-popover .region-picker-list,
.region-popover .region-picker-grid {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(184,174,160,.46) rgba(184,174,160,.045) !important;
}

.region-dd-list::-webkit-scrollbar,
.region-popover .region-picker-list::-webkit-scrollbar,
.region-popover .region-picker-grid::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.region-dd-list::-webkit-scrollbar-track,
.region-popover .region-picker-list::-webkit-scrollbar-track,
.region-popover .region-picker-grid::-webkit-scrollbar-track {
  background: rgba(184,174,160,.045) !important;
  border-radius: 999px;
}

.region-dd-list::-webkit-scrollbar-thumb,
.region-popover .region-picker-list::-webkit-scrollbar-thumb,
.region-popover .region-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,.46) !important;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box !important;
}

.coringa-select.is-open .region-dd-menu {
  animation: coringaMenuIn 150ms cubic-bezier(.2,.8,.2,1) both;
}

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

@media (max-width: 760px) {
  .root-utility-row {
    grid-template-columns: 1fr;
  }

  .root-secondary-section > summary small {
    display: none;
  }

  .root-more-panel {
    grid-column: 1 / -1;
  }

  .root-more-panel-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Precedência final da hierarquia de raios da identidade PADRAODAOBRA. */
.auth-card,
.modal-panel,
.settings-panel,
.app-dialog-panel,
.composer,
.app-shell.is-empty-workspace .composer,
.obra-board { border-radius: var(--radius-panel) !important; }

.usage-card,
.account-card,
.settings-card,
.history-item,
.obra-item-card,
.work-agreement,
.work-finance,
.work-closeout,
.obra-lifecycle-history,
.obra-operational-timeline,
.scope-change-card,
.work-order-card { border-radius: var(--radius-card) !important; }

.input,
.primary-btn,
.secondary-btn,
.danger-btn,
.new-chat-btn,
.install-app-btn,
.settings-shortcut,
.composer-tool,
.icon-btn,
.send-btn,
.voice-btn,
.history-actions button,
.obra-work-tools button,
.app-dialog-actions button { border-radius: var(--radius-control) !important; }

/* Medição responsiva: a chat-scroll já fornece 14px por lado. Evita aplicar
   o mesmo recuo novamente no painel e mantém seu eixo idêntico ao composer. */
@media (max-width: 900px) {
  body.engine-obra .chat-scroll > .obra-board {
    width: 100%;
  }

  body.engine-obra .composer,
  body.engine-obra .app-shell.is-empty-workspace .composer {
    --composer-edge: 28px;
  }
}

/* Obra v4/v5: eixo de trabalho mais confortável e tipografia operacional
   legível sem perder a densidade de informação do painel. */
body.engine-obra {
  --text: #E6D9C6;
  --muted: #BFB09B;
}

body.engine-obra .workspace {
  --conversation-width: clamp(760px, 62vw, 820px);
}

body.engine-obra .composer textarea {
  color: var(--text) !important;
}

body.engine-obra .composer textarea::placeholder {
  color: var(--muted) !important;
  opacity: .72;
}

@media (min-width: 901px) {
  body.engine-obra .composer {
    --composer-edge: 44px;
  }
}

body.engine-obra .obra-board,
body.engine-obra .composer {
  transition: width 180ms ease;
}

body.engine-obra .obra-board {
  padding: clamp(16px, 1.6vw, 22px);
}

body.engine-obra .obra-overview {
  margin-top: clamp(14px, 1.4vw, 18px);
}

body.engine-obra .work-agreement,
body.engine-obra .obra-item-card,
body.engine-obra .scope-change-card {
  border-radius: clamp(13px, 1.1vw, 16px);
}

body.engine-obra .agreement-head strong,
body.engine-obra .scope-changes-head > strong {
  font-size: 15px;
}

body.engine-obra .agreement-head small,
body.engine-obra .obra-item small,
body.engine-obra .scope-changes-head > small {
  font-size: 12px;
}

body.engine-obra .agreement-current small,
body.engine-obra .agreement-form label,
body.engine-obra .item-plan-form label,
body.engine-obra .work-order-form label,
body.engine-obra .work-order-review-form label,
body.engine-obra .scope-change-form label {
  font-size: 11.5px;
}

body.engine-obra .agreement-current strong,
body.engine-obra .agreement-pending-copy,
body.engine-obra .item-plan > p,
body.engine-obra .item-plan-current strong,
body.engine-obra .agreement-history li p,
body.engine-obra .scope-change-detail span {
  font-size: 12.5px;
}

body.engine-obra .item-plan-head strong,
body.engine-obra .work-orders-head strong,
body.engine-obra .work-order-title strong {
  font-size: 12.5px;
}

body.engine-obra .item-plan-head b,
body.engine-obra .item-plan-current small,
body.engine-obra .work-orders-head small,
body.engine-obra .work-order-title small,
body.engine-obra .work-order-title > b,
body.engine-obra .work-order-facts small,
body.engine-obra .work-order-history > summary,
body.engine-obra .work-order-reviews > summary {
  font-size: 10.5px;
}

body.engine-obra .item-plan-guidance,
body.engine-obra .item-plan-history li p,
body.engine-obra .work-order-empty,
body.engine-obra .work-order-card > p,
body.engine-obra .work-order-guidance,
body.engine-obra .work-order-facts strong,
body.engine-obra .scope-change-title small,
body.engine-obra .scope-change-detail span {
  font-size: 11.5px;
}

body.engine-obra .work-order-history li strong,
body.engine-obra .work-order-reviews li strong,
body.engine-obra .work-order-history li p,
body.engine-obra .work-order-reviews li p {
  font-size: 10.5px;
}

body.engine-obra .work-order-history li small,
body.engine-obra .work-order-reviews li small {
  font-size: 9.5px;
}

body.engine-obra .work-order-actions .primary-btn,
body.engine-obra .work-order-actions .secondary-btn,
body.engine-obra .work-order-actions .text-link,
body.engine-obra .scope-change-actions .primary-btn,
body.engine-obra .scope-change-actions .secondary-btn,
body.engine-obra .scope-change-actions .text-link {
  font-size: 11px;
}

body.engine-obra .obra-summary span { font-size: 12px; }
body.engine-obra .obra-summary strong { font-size: 16px; }
body.engine-obra .agreement-current strong { font-size: 13px; }

/* Dinheiro da obra: o compromisso representa contratado; a movimentação,
   realizado. Os dois permanecem visíveis e reconciliáveis no mesmo bloco. */
.work-finance {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: clamp(13px, 1.3vw, 17px);
  border: 1px solid rgba(184,174,160,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(184,174,160,.055), rgba(0,0,0,.09));
}

.finance-head,
.finance-entries-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.finance-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.finance-head strong,
.finance-entries-head strong {
  color: var(--text);
  font-size: 15px;
}

.finance-head small,
.finance-entries-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.finance-head > b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.2;
}

.finance-head > b.is-complete {
  color: #8fd5ab;
  background: rgba(79,174,117,.12);
}

.finance-head > b.is-pending {
  color: #efbf83;
  background: rgba(226,142,47,.11);
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.finance-summary-card {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(230,217,198,.06);
  border-radius: 11px;
  background: rgba(0,0,0,.1);
}

.finance-summary-card small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.finance-summary-card strong {
  color: var(--text);
  font-size: clamp(13px, 1.2vw, 15px);
  overflow-wrap: anywhere;
}

.finance-summary-card.is-negative strong { color: #f0a29a; }

.finance-guidance,
.finance-direct-material,
.finance-release-note,
.finance-entry-notes,
.finance-empty,
.finance-entry-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.finance-guidance {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(184,174,160,.045);
}

.finance-guidance.is-pending strong { color: #efbf83; }
.finance-guidance.is-complete { color: #8fd5ab; background: rgba(79,174,117,.07); }
.finance-guidance ul { margin: 5px 0 0; padding-left: 18px; }
.finance-direct-material strong { color: var(--text); }
.finance-entries-head { align-items: baseline; margin-top: 3px; }

.finance-portfolio {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(184,174,160,.18);
  border-radius: 13px;
  background: rgba(0,0,0,.13);
}

.finance-portfolio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.finance-portfolio-head > span { min-width: 0; display: grid; gap: 2px; }
.finance-portfolio-head strong { color: var(--text); font-size: 13.5px; }
.finance-portfolio-head small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.finance-portfolio-head > b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #8fd5ab;
  background: rgba(79,174,117,.12);
  font-size: 10.5px;
}
.finance-portfolio-head > b[data-risk="ATTENTION"] { color: #efbf83; background: rgba(226,142,47,.11); }
.finance-portfolio-head > b[data-risk="HIGH"] { color: #f0a29a; background: rgba(214,84,73,.11); }

.finance-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.finance-portfolio-grid .finance-summary-card { padding: 9px; }
.finance-summary-card.is-reference {
  border-color: rgba(184,174,160,.28);
  background: rgba(184,174,160,.055);
}
.finance-summary-card.is-reference strong { color: var(--accent); }

.finance-reference-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(79,174,117,.055);
  font-size: 11.5px;
  line-height: 1.5;
}
.finance-reference-note strong { color: #8fd5ab; }
.finance-reference-note.is-pending { background: rgba(226,142,47,.055); }
.finance-reference-note.is-pending strong { color: #efbf83; }

.finance-policy { border-top: 1px solid rgba(184,174,160,.1); padding-top: 8px; }
.finance-policy > summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.finance-policy > summary::-webkit-details-marker { display: none; }
.finance-policy > summary::before { content: "›"; display: inline-block; margin-right: 7px; transition: transform 140ms ease; }
.finance-policy[open] > summary::before { transform: rotate(90deg); }
.finance-policy-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-top: 10px;
}
.finance-policy-form label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.finance-policy-form .input { min-height: 40px; font-size: 12px; }

.finance-entry,
.finance-new-entry {
  border: 1px solid rgba(184,174,160,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.11);
}

.finance-entry > summary,
.finance-new-entry > summary {
  cursor: pointer;
  list-style: none;
}

.finance-entry > summary::-webkit-details-marker,
.finance-new-entry > summary::-webkit-details-marker { display: none; }

.finance-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.finance-entry > summary::after,
.finance-new-entry > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.finance-entry[open] > summary::after,
.finance-new-entry[open] > summary::after { transform: translateY(3px) rotate(225deg); }

.finance-entry > summary > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.finance-entry > summary > span:nth-child(2) {
  flex: 0 0 auto;
  justify-items: end;
  margin-left: auto;
}

.finance-entry > summary strong { color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.finance-entry > summary small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.finance-entry > summary b { color: var(--accent); font-size: 10.5px; font-weight: 700; }
.finance-entry > summary b[data-status="SETTLED"] { color: #8fd5ab; }
.finance-entry > summary b[data-status="CANCELLED"],
.finance-entry > summary b[data-status="CLOSED_PARTIAL"] { color: var(--muted); }

.finance-entry-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(184,174,160,.09);
}

.finance-entry-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(92px, .6fr));
  gap: 8px;
  padding-top: 10px;
}

.finance-entry-facts > span { min-width: 0; display: grid; gap: 2px; }
.finance-entry-facts small { color: var(--muted); font-size: 11px; }
.finance-entry-facts strong { color: var(--text); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

.finance-movements {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finance-movements li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(230,217,198,.05);
  border-radius: 9px;
  background: rgba(230,217,198,.015);
}

.finance-movements li > span { display: grid; gap: 1px; min-width: 0; }
.finance-movements li strong { color: var(--text); font-size: 12px; }
.finance-movements li small,
.finance-movements li p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.finance-movement-value { justify-items: end; }
.finance-movement-value.is-reversal strong { color: #f0a29a; }
.finance-movements .text-link { padding: 5px 3px; font-size: 10.5px; }

.finance-settlement-form,
.finance-commitment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(184,174,160,.09);
}

.finance-settlement-form label,
.finance-commitment-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.finance-settlement-form .input,
.finance-commitment-form .input { min-height: 40px; font-size: 12px; }
.finance-settlement-form textarea.input,
.finance-commitment-form textarea.input { resize: none; max-height: min(156px, 24dvh); overflow-y: hidden; }
.finance-wide { grid-column: 1 / -1; }
.finance-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.finance-form-actions .primary-btn,
.finance-form-actions .secondary-btn { width: auto; min-height: 40px; padding: 9px 13px; font-size: 11.5px; }
.finance-release-note { padding: 8px 9px; border-radius: 9px; color: #efbf83; background: rgba(226,142,47,.055); }
.finance-new-entry { padding: 11px 12px; }
.finance-new-entry > summary { width: fit-content; color: var(--accent); font-size: 11.5px; font-weight: 700; }
.finance-new-entry[open] > summary { margin-bottom: 10px; }
.finance-new-entry > summary::after { display: inline-block; margin-left: 9px; }
.finance-entry-body > .text-link { justify-self: end; font-size: 10.5px; }

@media (max-width: 900px) {
  body.engine-obra .workspace { --conversation-width: 100%; }
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-entry-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.engine-obra .obra-board { padding: 14px; }
  .finance-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .finance-head > b { align-self: flex-start; }
  .finance-entry > summary { align-items: flex-start; }
  .finance-entry > summary > span:nth-child(2) { align-items: flex-end; }
  .finance-settlement-form,
  .finance-commitment-form,
  .finance-policy-form,
  .finance-entry-facts { grid-template-columns: minmax(0, 1fr); }
  .finance-wide,
  .finance-form-actions { grid-column: 1; }
  .finance-form-actions .primary-btn,
  .finance-form-actions .secondary-btn { width: 100%; }
  .finance-movements li { grid-template-columns: minmax(0, 1fr) auto; }
  .finance-movements li > p { grid-column: 1 / -1; }
  .finance-movements li > .text-link { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 400px) {
  .finance-summary { grid-template-columns: minmax(0, 1fr); }
  .finance-portfolio-grid { grid-template-columns: minmax(0, 1fr); }
  .finance-portfolio-head { align-items: flex-start; flex-direction: column; }
  .finance-portfolio-head > b { align-self: flex-start; }
  .finance-entry > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .finance-entry > summary > span:nth-child(2) { grid-column: 1; justify-items: start; margin: 3px 0 0; }
  .finance-entry > summary::after { grid-column: 2; grid-row: 1; }
}

/* ═══════════════════ Central Root: workspace administrativo ═══════════════════
   Um único sistema visual para a operação. A largura pertence ao workspace;
   leitura, formulários e cartões preservam limites próprios de conteúdo. */
.root-console {
  --root-bg: #100f0d;
  --root-surface: #171510;
  --root-surface-raised: #1d1a13;
  --root-border: rgba(184, 174, 160, .12);
  --root-border-strong: rgba(184, 174, 160, .26);
  --root-radius-control: 10px;
  --root-radius-card: 14px;
  --root-radius-panel: 18px;
  --root-space-1: 4px;
  --root-space-2: 8px;
  --root-space-3: 12px;
  --root-space-4: 16px;
  --root-space-5: 24px;
  --root-space-6: 32px;
  position: fixed;
  inset: 0;
  z-index: 250;
  color: var(--text);
  background:
    radial-gradient(circle at 92% -8%, rgba(184,174,160,.05), transparent 31rem),
    var(--root-bg);
  color-scheme: dark;
}

.root-console[hidden] { display: none; }

body.root-console-open { overflow: hidden; }

.root-skip-link {
  position: fixed;
  z-index: 280;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  translate: 0 -160%;
  border: 1px solid var(--accent);
  border-radius: var(--root-radius-control);
  background: var(--root-surface-raised);
  color: var(--text);
  padding: 10px 14px;
  text-decoration: none;
}

.root-skip-link:focus { translate: 0; }

.root-console-frame {
  display: grid;
  grid-template-columns: clamp(220px, 16vw, 248px) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.root-console-sidebar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border-inline-end: 1px solid var(--root-border);
  background: rgba(18, 16, 12, .94);
  padding:
    calc(var(--root-space-5) + env(safe-area-inset-top))
    var(--root-space-4)
    calc(var(--root-space-4) + env(safe-area-inset-bottom));
}

.root-console-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 var(--root-space-2) var(--root-space-5);
}

.root-console-brand :is(div, a) { min-width: 0; }
.root-console-brand-home {
  display: block;
  border-radius: var(--root-radius-control);
  color: inherit;
  text-decoration: none;
}
.root-console-brand-home:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.root-console-brand strong,
.root-console-brand span { display: block; }
.root-console-brand strong {
  color: var(--text);
  font-family: var(--font-brand);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .015em;
}
.root-console-brand div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.root-console-nav {
  display: grid;
  align-content: start;
  gap: var(--root-space-1);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}

.root-console-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--root-radius-control);
  color: var(--muted);
  padding: 9px 11px;
  text-decoration: none;
  touch-action: manipulation;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.root-console-nav a svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.root-console-nav a.is-active {
  border-color: var(--root-border);
  background: linear-gradient(90deg, rgba(184,174,160,.13), rgba(184,174,160,.045));
  color: var(--text);
}

.root-console-nav a.is-active svg { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .root-console-nav a:hover {
    border-color: var(--root-border);
    background-color: rgba(184,174,160,.055);
    color: var(--text);
  }
}

.root-console-nav a:focus-visible,
.root-console button:focus-visible,
.root-console input:focus-visible,
.root-console select:focus-visible,
.root-console summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.root-console-nav small {
  min-width: 21px;
  border-radius: 999px;
  background: rgba(184,174,160,.16);
  color: var(--accent);
  padding: 2px 6px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.root-console-nav small[hidden] { display: none; }

.root-console-sidebar-foot {
  min-width: 0;
  border-top: 1px solid var(--root-border);
  padding: var(--root-space-4) var(--root-space-2) 0;
}
.root-console-sidebar-foot span,
.root-console-sidebar-foot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.root-console-sidebar-foot span { color: var(--text); font-size: 13px; font-weight: 700; }
.root-console-sidebar-foot small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.root-console-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  outline: 0;
}

.root-console-topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--root-space-4);
  min-width: 0;
  min-height: 88px;
  border-bottom: 1px solid var(--root-border);
  background: rgba(16,15,13,.90);
  padding:
    calc(var(--root-space-3) + env(safe-area-inset-top))
    clamp(16px, 2.2vw, 32px)
    var(--root-space-3);
  backdrop-filter: blur(14px);
}

.root-console-menu { display: none; }

.root-console-heading { min-width: 0; }
.root-console-heading > span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.root-console-heading h1 {
  margin: 3px 0 0;
  color: var(--text);
  font-family: var(--font-brand);
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}
.root-console-heading p {
  max-width: 72ch;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: pretty;
}

.root-console-actions {
  display: flex;
  align-items: center;
  gap: var(--root-space-2);
}
.root-console-actions .secondary-btn,
.root-console-actions .icon-btn { min-height: 44px; }
.root-console-actions .icon-btn { width: 44px; border-radius: var(--root-radius-control); }
.root-console-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.root-console-refresh svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.root-console-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding:
    clamp(16px, 2.2vw, 32px)
    clamp(14px, 2.4vw, 36px)
    calc(clamp(24px, 3vw, 48px) + env(safe-area-inset-bottom));
}

.root-console-view {
  width: min(100%, 1480px);
  min-width: 0;
  margin-inline: auto;
}
.root-console-view[data-root-console-view="visao-geral"],
.root-console-view[data-root-console-view="workspace"] { width: min(100%, 1180px); }
.root-console-view[data-root-console-view="clientes"] { width: min(100%, 1260px); }
.root-console-view[hidden] { display: none; }
.root-console-view.is-transitioning { animation: root-console-enter 180ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes root-console-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.root-console .root-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--root-space-3);
}

.root-console .root-stat,
.root-console .root-user,
.root-console .root-recovery,
.root-console .root-queue-card,
.root-console .root-op-section,
.root-console .root-output,
.root-console .root-utility-panel,
.root-console .root-region-panel {
  border-color: var(--root-border);
  box-shadow: none;
}

.root-console .root-stat {
  min-height: 96px;
  border-radius: var(--root-radius-card);
  background: var(--root-surface);
  padding: var(--root-space-4);
}
.root-console .root-stat span { color: var(--muted); font-size: 12px; }
.root-console .root-stat strong { margin-top: var(--root-space-1); font-size: clamp(21px, 2vw, 27px); }

.root-console .root-recovery {
  margin-top: var(--root-space-4);
  border-radius: var(--root-radius-card);
  background: rgba(184,174,160,.055);
  padding: var(--root-space-4);
}
.root-console .root-recovery > div:first-child { max-width: 76ch; }
.root-console .root-recovery .help-text { line-height: 1.5; }

.root-overview-queues { margin-top: var(--root-space-6); }
.root-overview-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--root-space-4);
  margin-bottom: var(--root-space-3);
}
.root-overview-section-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.root-overview-section-head h2 {
  margin: 3px 0 0;
  font-family: var(--font-brand);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.1;
}
.root-overview-section-head p { max-width: 46ch; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }

.root-queue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--root-space-3);
}
.root-queue-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "area value" "label arrow";
  align-items: center;
  gap: 3px var(--root-space-3);
  min-width: 0;
  min-height: 92px;
  border: 1px solid var(--root-border);
  border-radius: var(--root-radius-card);
  background: var(--root-surface);
  color: var(--text);
  padding: var(--root-space-4);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.root-queue-card > span { grid-area: area; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.root-queue-card > strong { grid-area: value; color: var(--text); font-family: var(--font-brand); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.root-queue-card > small { grid-area: label; min-width: 0; color: var(--text); font-size: 13px; line-height: 1.35; }
.root-queue-card > svg { grid-area: arrow; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.root-queue-card.is-attention { border-color: var(--root-border-strong); background: linear-gradient(135deg, rgba(184,174,160,.10), var(--root-surface)); }
.root-queue-card.is-attention > strong,
.root-queue-card.is-attention > svg { color: var(--accent); stroke: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .root-queue-card:hover { border-color: var(--root-border-strong); background-color: var(--root-surface-raised); transform: translateY(-1px); }
}

.root-console .root-users-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 210px);
  justify-content: start;
  align-items: end;
  gap: var(--root-space-3);
  margin-bottom: var(--root-space-4);
}
.root-clients-layout {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(420px, 680px);
  justify-content: start;
  align-items: start;
  gap: var(--root-space-4);
  width: min(100%, 1260px);
  min-width: 0;
}
.root-clients-list { min-width: 0; }
.root-console .root-user-search,
.root-console .root-user-filter { width: 100%; }
.root-console .root-users {
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  gap: var(--root-space-3);
  max-height: none;
  overflow: visible;
  padding: 2px;
}
.root-console .root-user {
  border-radius: var(--root-radius-card);
  background: var(--root-surface);
  padding: var(--root-space-4);
}
.root-console .root-user--summary {
  gap: 0;
  padding: 13px 14px;
  cursor: default;
}
.root-console .root-user--summary.is-selected {
  border-color: var(--root-border-strong);
  background: linear-gradient(90deg, rgba(184,174,160,.10), var(--root-surface));
}
.root-console .root-user--summary .root-user-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 68px;
  align-items: center;
  gap: var(--root-space-2);
  flex-wrap: nowrap;
}
.root-console .root-user--summary .root-user-id { flex-basis: auto; }
.root-console .root-user--summary .root-user-context,
.root-console .root-user--summary .root-actions { display: none; }
.root-console .root-user--summary .root-user-meta { flex-wrap: nowrap; }
.root-console .root-user--summary .root-user-meta span:nth-child(2) { display: none; }
.root-user-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 68px;
  min-height: 38px;
  border: 1px solid var(--root-border);
  border-radius: var(--root-radius-control);
  background: rgba(184,174,160,.055);
  color: var(--text);
  padding: 7px 9px;
  font-size: 12px;
  cursor: pointer;
}
.root-user-open svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .root-user-open:hover { border-color: var(--root-border-strong); color: var(--accent); }
}
.root-client-detail {
  position: sticky;
  top: 0;
  min-width: 0;
  max-height: calc(100dvh - 176px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--root-border);
  border-radius: var(--root-radius-panel);
  background: var(--root-surface);
  padding: var(--root-space-3);
  outline: 0;
}
.root-client-detail[hidden] { display: none; }
.root-client-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.root-client-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--root-space-3);
  min-height: 48px;
  border-bottom: 1px solid var(--root-border);
  padding: 0 2px var(--root-space-3);
  margin-bottom: var(--root-space-3);
}
.root-client-detail-head span,
.root-client-detail-head strong { display: block; }
.root-client-detail-head span { color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.root-client-detail-head strong { margin-top: 3px; font-size: 14px; }
.root-client-detail-head .icon-btn { width: 44px; min-height: 44px; border-radius: var(--root-radius-control); }
.root-console .root-user--detail { border: 0; background: transparent; padding: 0; }
.root-console .root-user--detail .root-user-head { align-items: center; }
.root-console .root-user--detail .root-user-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--root-space-2); }
.root-console .root-user--detail .root-user-context > span { min-width: 0; border: 1px solid var(--root-border); border-radius: var(--root-radius-control); background: rgba(0,0,0,.10); padding: 9px 10px; line-height: 1.4; }
.root-console .root-user--detail .root-actions { padding-top: var(--root-space-3); }
.root-console .root-users-pagination { margin-top: var(--root-space-3); padding: 0 2px; }

.root-console .root-ops {
  display: block;
  margin-bottom: var(--root-space-4);
}
.root-console .root-op-section {
  border-radius: var(--root-radius-card);
  background: var(--root-surface);
  padding: var(--root-space-3);
}
.root-console .root-op-section-title { margin: 0 0 var(--root-space-2); padding-inline: 2px; }
.root-console .root-op-buttons { gap: var(--root-space-2); }
.root-console .root-op-buttons button {
  min-height: 44px;
  border-radius: var(--root-radius-control);
  padding: 9px 13px;
  font-size: 13px;
}

.root-console .root-output {
  position: relative;
  width: min(100%, 1120px);
  min-height: 132px;
  border-radius: var(--root-radius-panel);
  background: var(--root-surface);
  padding: clamp(14px, 1.6vw, 20px);
}

/* Todo controle interativo da Central Root parte da mesma base visual. Isso
   impede Chrome/WebView de reintroduzir cinza nativo em botões sem classe. */
.root-console button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  font-family: inherit;
  touch-action: manipulation;
}

.root-console .secondary-btn {
  border-color: var(--root-border);
  background: rgba(184,174,160,.055);
  color: var(--text);
}
.root-console .root-output > :is(
  .root-workspace-head,
  .root-workspace-intro,
  .root-payment-toolbar,
  .root-health-card,
  .root-health-metrics,
  .root-communication-actions,
  .root-result-list,
  .root-event-list,
  .root-workspace-empty
) { width: min(100%, 1080px); }
.root-console .root-output-close {
  min-height: 40px;
  border-radius: var(--root-radius-control);
  margin: 0;
}
.root-collection-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--root-space-3);
  width: min(100%, 1080px);
  margin-top: var(--root-space-4);
  border-top: 1px solid var(--root-border);
  padding-top: var(--root-space-3);
}
.root-collection-pagination span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.root-collection-pagination .secondary-btn { flex: 0 0 auto; min-height: 40px; border-radius: var(--root-radius-control); }
.root-console .root-payment-list,
.root-console .root-feedback-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 540px));
  gap: var(--root-space-3);
}
.root-console .root-support-inbox {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 760px));
  gap: var(--root-space-3);
}
.root-console .root-payment-card,
.root-console .root-feedback-card,
.root-console .root-support-ticket,
.root-console .root-health-card,
.root-console .root-health-metric {
  border-radius: var(--root-radius-card);
  background: var(--root-surface-raised);
}

.root-console .root-utility {
  margin-top: var(--root-space-4);
  border-radius: var(--root-radius-panel);
}
.root-console .root-utility-tabs > button { border-radius: var(--root-radius-control); }
.root-console .root-utility-panel { border-radius: var(--root-radius-card); }

.root-console-scrim { display: none; }

@media (max-width: 1080px) {
  .root-console .root-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .root-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .root-clients-layout { grid-template-columns: minmax(0, 1fr); width: min(100%, 760px); }
  .root-client-detail { position: static; max-height: none; }
}

@media (max-width: 840px) {
  .root-console-frame { grid-template-columns: minmax(0, 1fr); }
  .root-console-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(82vw, 286px);
    translate: -105% 0;
    border-inline-end-color: var(--root-border-strong);
    box-shadow: 20px 0 48px rgba(0,0,0,.44);
    transition: translate 180ms ease;
  }
  .root-console.is-nav-open .root-console-sidebar { translate: 0; }
  .root-console-scrim {
    position: fixed;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.56);
    padding: 0;
  }
  .root-console-scrim[hidden] { display: none; }
  .root-console-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 82px;
    padding-inline: clamp(12px, 3.5vw, 20px);
  }
  .root-console-menu {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--root-border);
    border-radius: var(--root-radius-control);
    background: rgba(184,174,160,.055);
    color: var(--text);
    padding: 0;
  }
  .root-console-menu svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .root-console-heading p { display: none; }
  .root-console-scroll { padding-inline: clamp(12px, 3.8vw, 20px); }
}

@media (max-width: 620px) {
  .root-console-topbar { gap: var(--root-space-2); }
  .root-console-refresh {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    overflow: hidden;
    padding: 0;
  }
  .root-console-refresh-label,
  .root-console-refresh .button-loading-label { display: none; }
  .root-console-refresh svg { width: 19px; height: 19px; }
  .root-console-heading > span { font-size: 10px; }
  .root-console-heading h1 { font-size: clamp(21px, 7vw, 25px); }
  .root-console .root-stats,
  .root-queue-grid { grid-template-columns: minmax(0, 1fr); }
  .root-console .root-stat { min-height: 82px; }
  .root-overview-section-head,
  .root-console .root-recovery { align-items: stretch; flex-direction: column; }
  .root-overview-section-head p { text-align: left; }
  .root-console .root-recovery-actions { justify-content: flex-start; }
  .root-console .root-recovery-actions .secondary-btn { flex: 1 1 180px; }
  .root-console .root-users-toolbar { grid-template-columns: minmax(0, 1fr); }
  .root-console .root-users { grid-template-columns: minmax(0, 1fr); }
  .root-console .root-user--summary .root-user-head { grid-template-columns: minmax(0, 1fr) 44px; }
  .root-console .root-user--summary .root-user-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .root-console .root-user--summary .root-user-meta span:nth-child(2) { display: inline-flex; }
  .root-user-open { grid-column: 2; grid-row: 1; min-width: 44px; width: 44px; padding: 0; }
  .root-user-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .root-console .root-user--detail .root-user-context { grid-template-columns: minmax(0, 1fr); }
  .root-collection-pagination { align-items: stretch; flex-direction: column; }
  .root-collection-pagination .secondary-btn { width: 100%; }
  .root-console .root-op-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .root-console .root-op-buttons button { width: 100%; }
  .root-console .root-output { border-radius: var(--root-radius-card); padding: var(--root-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .root-console-view.is-transitioning,
  .root-console .root-output.is-transitioning { animation: none; }
  .root-console-sidebar,
  .root-console-nav a,
  .root-queue-card { transition-duration: .01ms; }
}

@media (max-width: 440px) {
  .root-more-panel-inner {
    grid-template-columns: 1fr;
  }
}

/* Seletor visual de regiao do perfil Root. O select real permanece no DOM e
   continua sendo a fonte de verdade do formulario. */
.input.is-headless {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.region-dd {
  position: relative;
  width: 100%;
  min-width: 0;
}

.region-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 45px;
  padding: 0 14px;
  border-color: rgba(184,174,160,.18);
  border-radius: 14px;
  background: rgba(20,18,16,.86);
  color: #d8cfc2;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.region-dd-btn:hover,
.region-dd-btn[aria-expanded="true"] {
  border-color: rgba(184,174,160,.28);
  background: rgba(28,26,22,.94);
}

.region-dd-btn:focus {
  border-color: rgba(184,174,160,.26);
  background: rgba(20,18,16,.94);
  box-shadow: none;
}

.region-dd-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.region-dd-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  opacity: .76;
  transition: transform 160ms ease, color 160ms ease;
}

.region-dd-btn[aria-expanded="true"] svg {
  color: #d8cfc2;
  transform: rotate(180deg);
}

.region-dd-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Sem padding lateral de proposito: quem recua e a lista. Assim a folga de
     8px fica por dentro da area de rolagem e o realce do item selecionado
     nunca encosta no scrollbar. */
  padding: 7px 0;
  border: 1px solid rgba(184,174,160,.24);
  border-radius: 13px;
  background: rgba(24,22,18,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  backdrop-filter: blur(12px);
}

.region-dd-menu[hidden] {
  display: none !important;
}

.region-dd-list {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  max-height: min(36dvh, 180px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sem scrollbar-gutter: stable de proposito. Ele reservava a faixa do
     scrollbar mesmo quando nao havia scrollbar, e o realce do item
     selecionado ficava visivelmente torto (folga 6px na esquerda contra
     24px na direita). Agora a faixa so e descontada quando o scroll existe
     de fato, e o realce fica simetrico com a lista curta. */
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,.46) rgba(184,174,160,.045);
}

.region-dd-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.region-dd-list::-webkit-scrollbar-track {
  background: rgba(184,174,160,.045);
  border-radius: 999px;
}

.region-dd-list::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,.46);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.region-dd-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(184,174,160,.64);
}

.region-dd-item {
  position: relative;
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.region-dd-item + .region-dd-item {
  border-top: 0;
}

.region-dd-item + .region-dd-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* Mesma borda direita da caixa de realce: linha, item e realce terminam
     todos no mesmo eixo. */
  inset-inline-end: 0;
  height: 1px;
  background: rgba(255,246,232,.07);
  pointer-events: none;
}

.region-dd-item:hover {
  color: #e3daca;
  background: transparent;
}

.region-dd-item[aria-selected="true"] {
  color: #e3daca;
  border-radius: 4px;
  background: rgba(184,174,160,.06);
  box-shadow: inset 2px 0 rgba(184,174,160,.38);
}

.region-dd-item:focus-visible {
  outline: 1px solid rgba(184,174,160,.34);
  outline-offset: -2px;
}

.settings-password-forgot {
  justify-self: start;
  min-height: 28px;
}

.settings-password-reset {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.settings-password-reset-actions {
  align-items: center;
}

.modal-panel,
.settings-panel {
  width: min(940px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.42);
}
.modal-panel { padding: 20px; }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.modal-head span {
  display: block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  margin-bottom: 4px;
}
.modal-head h2 {
  margin: 0;
  font-family: var(--font-brand);
  letter-spacing: 0;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(20,18,16,0.5);
  padding: 18px;
}
.plan-card.is-featured { border-color: var(--border-strong); background: rgba(184,174,160,0.08); }
.plan-card h3 {
  margin: 0 0 6px;
  font-family: var(--font-brand);
  font-size: 23px;
}
.plan-card p { color: var(--muted); margin: 0 0 16px; }
.plan-card strong {
  display: block;
  font-family: var(--font-brand);
  font-size: 32px;
  margin-bottom: 16px;
}
.plan-card button { width: 100%; padding: 12px; }
.settings-panel {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.settings-nav {
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}
.settings-tab {
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}
.settings-tab:hover,
.settings-tab.is-active {
  background: rgba(184,174,160,0.09);
  color: var(--accent);
}
.settings-content { padding: 20px; min-width: 0; min-height: 0; overflow-y: auto; }
.settings-view { display: none; }
.settings-view.is-active {
  display: grid;
  gap: 14px;
  animation: settingsViewIn 150ms ease both;
}
@keyframes settingsViewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.settings-loading {
  min-height: 46px;
  padding: 6px 0;
}
.settings-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(20,18,16,0.54);
  padding: 16px;
}
.settings-card span,
.settings-card p { color: var(--muted); }
.settings-card h3 { margin: 0; }
.settings-card strong {
  display: block;
  font-family: var(--font-brand);
  color: var(--accent);
  font-size: 28px;
  margin: 0;
}
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.privacy-message {
  min-height: 20px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
  will-change: opacity, transform;
}
.privacy-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.legal-row {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(20,18,16,0.54);
  color: var(--text);
  padding: 15px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.root-view { min-width: 0; }
.root-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.root-toolbar h3 {
  margin: 0 0 4px;
  font-family: var(--font-brand);
}
.root-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.root-stat--attention {
  border-color: rgba(184,174,160,.36);
  background: linear-gradient(135deg, rgba(184,174,160,.12), rgba(20,18,16,.54));
}
.root-recovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(184,174,160,.32);
  border-radius: 18px;
  background: rgba(184,174,160,.07);
  padding: 14px;
}
.root-recovery .root-section-title { display: block; margin: 0 0 5px; color: var(--accent); }
.root-recovery .help-text { margin: 0; }
.root-recovery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.root-users-toolbar { display: flex; align-items: end; gap: 10px; }
.root-user-search { width: min(420px, 100%); margin: 0; }
.root-user-filter { width: min(230px, 100%); margin: 0; }
.root-stat,
.root-user {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(20,18,16,0.54);
  padding: 12px;
}
.root-stat {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 0;
  padding-block: clamp(10px, 1.2vw, 12px);
}
.root-stat span,
.root-user small,
.root-user-meta { color: var(--muted); }
.root-stat strong {
  display: block;
  margin-top: 0;
  line-height: 1.2;
  font-family: var(--font-brand);
  color: var(--accent);
}
.root-users {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 8px;
  max-height: clamp(280px, 46dvh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px 8px 8px 3px;
  overscroll-behavior: contain;
}

@media (min-width: 901px) {
  .settings-panel.is-root-mode {
    width: min(1320px, calc(100vw - 36px));
    max-height: min(900px, calc(100dvh - 24px));
    grid-template-columns: clamp(190px, 15vw, 220px) minmax(0, 1fr);
  }
  .settings-panel.is-root-mode .root-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.root-users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.4vw, 14px);
  min-width: 0;
  padding: 2px 2px 0;
}
.root-users-pagination > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.root-users-pagination .secondary-btn {
  min-height: 40px;
  flex: 0 0 auto;
}
.root-section-title {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 2px 0 8px;
}
.root-section-title--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.root-section-title--inline small {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.root-health-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(8px, 1.2vw, 12px);
}
.root-health-metric {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20,18,16,.48);
  padding: clamp(11px, 1.4vw, 14px);
}
.root-health-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: .72;
}
.root-health-metric.is-erro::before,
.root-health-metric.is-atencao::before { background: var(--danger); }
.root-health-metric > span,
.root-health-metric > small { color: var(--muted); }
.root-health-metric > span {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.root-health-metric > strong {
  color: var(--text);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.root-health-metric > small { line-height: 1.35; }
.root-regions {
  min-width: 0;
}
.root-ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.root-op-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20,18,16,0.38);
  padding: 12px;
  min-width: 0;
  min-height: 0;
  align-self: start;
}
.root-op-section-title {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.root-op-section--advanced > summary,
.root-secondary-section > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  list-style-position: inside;
}
.root-op-section--advanced[open] > summary { margin-bottom: 12px; }
.root-secondary-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20,18,16,.32);
  padding: 13px;
}
.root-secondary-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.root-secondary-section > summary::-webkit-details-marker { display: none; }
.root-secondary-section > summary small { color: var(--muted); font-weight: 400; }
.root-secondary-section[open] > summary { margin-bottom: 12px; color: var(--accent); }
.root-legacy-regions { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.root-legacy-regions > summary { cursor: pointer; color: #ffb0a5; font-size: 12px; }
.root-legacy-regions > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
}
.root-legacy-regions .root-region-list { margin-top: 10px; }
.root-op-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}
.root-op-buttons button {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(184,174,160,0.06);
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.25;
  min-height: 34px;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.root-op-section--scroll .root-op-buttons {
  /* Sem teto de altura: todos os botoes de OPERACAO ficam visiveis. Antes um
     max-height + overflow escondia 3 botoes atras de um scroll aninhado dentro
     do modal (que ja rola). */
  max-height: none;
  overflow: visible;
  padding-right: 3px;
  overscroll-behavior: contain;
}
.root-op-buttons button:hover {
  border-color: var(--border-strong);
  color: var(--accent);
}
.root-op-buttons .root-op-danger {
  color: #ffb0a5;
  border-color: rgba(255,140,140,0.34);
}
.root-op-buttons .root-op-danger:hover {
  color: var(--text);
  background: rgba(190,55,55,0.22);
  border-color: rgba(255,140,140,0.58);
}
.root-output {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20,18,16,0.72);
  color: var(--muted);
  padding: 12px;
  white-space: normal;
  overflow: auto;
  max-height: 260px;
  font: inherit;
}
.root-region-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(20,18,16,0.42);
  padding: 12px;
  min-width: 0;
}
.root-region-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: clamp(142px, 24dvh, 232px);
  overflow: auto;
  padding: 3px 8px 8px 3px;
  overscroll-behavior: contain;
}
.root-region {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(20,18,16,0.54);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px 8px 12px;
  min-width: 0;
}
.root-region strong {
  font-family: var(--font-brand);
  color: var(--text);
}
.root-region span {
  color: var(--muted);
  font-size: 12px;
}
.root-region button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(184,174,160,0.06);
  color: var(--text);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}
.root-region button:hover {
  border-color: var(--border-strong);
  color: var(--accent);
}
.root-user {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
.root-user-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.root-user-id {
  min-width: 0;
  flex: 1 1 220px;
  position: relative;
  padding-left: 0;
}
.root-user-id:has(.root-recovery-check) { padding-left: 30px; }
.root-recovery-check { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; }
.root-recovery-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.root-user-id strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.root-user-id small {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.root-user-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}
.root-user-meta span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(20,18,16,0.5);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.root-user-meta .root-status { color: var(--text); }
.root-user-meta .root-status.is-pending {
  color: #f2c75c;
  border-color: rgba(184,174,160,.38);
}
.root-user-meta .root-status.is-blocked {
  color: #ff8c8c;
  border-color: rgba(255,140,140,0.4);
}
.root-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
}
.root-actions button {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(184,174,160,0.06);
  color: var(--text);
  padding: 7px 13px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.root-actions button:hover {
  border-color: var(--border-strong);
  color: var(--accent);
}
.root-actions .root-action-danger {
  color: #ff9b9b;
  border-color: rgba(255,140,140,0.3);
}
.root-actions .root-action-danger:hover {
  color: var(--text);
  background: rgba(190,55,55,0.28);
  border-color: rgba(255,140,140,0.6);
}
.root-actions .root-action-primary { border-color: rgba(184,174,160,.54); background: rgba(184,174,160,.14); color: var(--accent); }
.root-user-context { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; }
.root-user-context .is-attention { color: #f2c75c; }
.root-more-actions { position: relative; }
.root-more-actions summary { list-style: none; border: 1px solid var(--border); border-radius: 10px; padding: 7px 13px; cursor: pointer; font-size: 13px; }
.root-more-actions summary::-webkit-details-marker { display: none; }
.root-more-actions[open] summary { border-color: var(--border-strong); color: var(--accent); }
.root-more-actions > div { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.root-workspace-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
.root-workspace-head span { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.root-workspace-head h4 { margin: 3px 0 0; font-size: 19px; }
.root-workspace-head p { margin: 0; color: var(--muted); }
.root-support-inbox, .root-result-list { display: grid; gap: 12px; }
.root-support-ticket { border: 1px solid var(--border); border-radius: 15px; padding: 14px; background: rgba(12,11,9,.42); }
.root-support-ticket header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.root-support-ticket header strong, .root-support-ticket header small { display: block; overflow-wrap: anywhere; }
.root-support-ticket header small { color: var(--muted); font-size: 12px; }
.root-support-ticket h5 { margin: 12px 0 8px; font-size: 15px; }
.support-thread { display: grid; gap: 8px; margin: 8px 0 12px; }
.support-message { max-width: min(86%, 680px); border: 1px solid var(--border); border-radius: 14px; padding: 9px 11px; overflow-wrap: anywhere; }
.support-message.is-root { margin-left: auto; border-color: rgba(184,174,160,.34); background: rgba(184,174,160,.09); }
.support-message.is-user { background: rgba(230,217,198,.025); }
.support-message > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.support-message p { margin: 5px 0 0; white-space: pre-wrap; line-height: 1.45; }
.support-ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.support-ticket-actions button { min-height: 38px; border: 1px solid var(--border); border-radius: 10px; background: rgba(184,174,160,.06); color: var(--text); padding: 8px 12px; cursor: pointer; }
.root-result-list > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.root-result-list span { color: var(--muted); overflow-wrap: anywhere; }
.root-workspace-empty { display: grid; gap: 4px; color: var(--muted); }
.root-workspace-empty strong { color: var(--text); }
.root-view button,
.root-view .root-more-actions > summary,
.root-view .root-op-section--advanced > summary,
.root-view .root-secondary-section > summary {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  min-height: 44px;
  touch-action: manipulation;
}
.root-view button:focus-visible,
.root-view summary:focus-visible,
.root-view input:focus-visible,
.root-view select:focus-visible,
.root-view textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.root-history-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.root-history-summary span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; color: var(--muted); font-size: 12px; }
.root-history-summary strong { color: var(--text); }
.root-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.root-history-list li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--border); padding: 10px 0; }
.root-history-list time, .root-history-list small { color: var(--muted); font-size: 11px; }
.root-history-list strong, .root-history-list small { display: block; overflow-wrap: anywhere; }
.root-history-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(180px, 1fr) minmax(220px, 1.4fr);
  align-items: start;
  gap: 8px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.root-history-row > strong,
.root-history-row > span,
.root-history-row > small { min-width: 0; overflow-wrap: anywhere; }
.root-history-row > small { color: var(--muted); }
.root-history-row > button { grid-column: 1 / -1; justify-self: start; }
.root-health-card { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.root-health-card strong { flex: 1 1 100%; }
.root-health-card span { color: var(--muted); font-size: 12px; }
.root-health-card.is-conflito_porta, .root-health-card.is-reiniciando, .root-health-card.is-erro_status { border-color: rgba(255,140,140,.45); background: rgba(190,55,55,.10); }
.root-health-card.is-saudavel { border-color: rgba(112,210,154,.38); background: rgba(45,130,82,.10); }
.root-payment-toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.root-payment-filters,
.root-payment-bulk,
.root-payment-actions,
.root-feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.root-payment-filters { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.root-payment-filter,
.root-payment-bulk button,
.root-payment-actions button,
.root-feedback-actions button,
.root-result-list button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 13px;
  background: rgba(184,174,160,.055);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.root-payment-filter:hover,
.root-payment-bulk button:hover,
.root-payment-actions button:hover,
.root-feedback-actions button:hover,
.root-result-list button:hover { color: var(--accent); border-color: var(--border-strong); }
.root-payment-filter.is-active { color: var(--accent); border-color: rgba(184,174,160,.55); background: rgba(184,174,160,.12); }
.root-payment-filter span { margin-left: 4px; color: inherit; opacity: .72; }
.root-payment-bulk .root-action-danger { color: #ff9b9b; border-color: rgba(255,140,140,.32); }
.root-payment-list,
.root-feedback-list { display: grid; gap: 10px; }
.root-payment-card,
.root-feedback-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: rgba(12,11,9,.42); }
.root-user,
.root-payment-card,
.root-feedback-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
.root-payment-card header,
.root-feedback-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.root-payment-card header > div { flex: 1; min-width: 0; }
.root-payment-card header strong,
.root-payment-card header small,
.root-feedback-card header strong,
.root-feedback-card header small { display: block; overflow-wrap: anywhere; }
.root-payment-card header small,
.root-feedback-card header small { color: var(--muted); font-size: 12px; }
.root-payment-check { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -8px 0 -4px -9px; cursor: pointer; }
.root-payment-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.root-payment-status,
.root-feedback-priority { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.root-payment-status.is-pendente_admin,
.root-payment-status.is-erro,
.root-feedback-priority.is-alta,
.root-feedback-priority.is-critica { color: #ffad9f; border-color: rgba(255,140,140,.42); background: rgba(190,55,55,.09); }
.root-payment-status.is-processado { color: #9fdeb7; border-color: rgba(112,210,154,.38); background: rgba(45,130,82,.08); }
.root-payment-status.is-arquivado { opacity: .65; }
.root-payment-amounts { margin: -3px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.root-payment-amounts,
.root-payment-status,
.root-stat strong { font-variant-numeric: tabular-nums; }
.root-payment-amounts strong { color: var(--text); }
.root-payment-amounts .is-negative { color: #ff9b9b; }
.root-payment-blocks { margin: 10px 0; border-left: 2px solid rgba(255,140,140,.46); padding: 8px 10px; background: rgba(190,55,55,.06); color: var(--muted); font-size: 12px; }
.root-payment-blocks strong { color: var(--text); }
.root-payment-blocks ul { margin: 5px 0 0; padding-left: 18px; }
.root-payment-details { margin: 10px 0; border-top: 1px solid var(--border); padding-top: 9px; }
.root-payment-details summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: 12px; }
.root-payment-details dl { display: grid; gap: 6px; margin: 9px 0 0; }
.root-payment-details dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }
.root-payment-details dt { color: var(--muted); }
.root-payment-details dd { margin: 0; overflow-wrap: anywhere; }
.root-feedback-card > p { margin: 8px 0 12px; white-space: pre-wrap; line-height: 1.5; }
.root-feedback-actions { padding-top: 10px; border-top: 1px solid var(--border); }
.root-event-list { display: grid; gap: 0; margin-top: 14px; }
.root-event-list h5 { margin: 0 0 8px; }
.root-event-list > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.root-event-list time,
.root-event-list small { color: var(--muted); font-size: 11px; }
.root-event-list strong,
.root-event-list small { display: block; overflow-wrap: anywhere; }
input.input[readonly],
textarea.input[readonly],
input.input:read-only,
textarea.input:read-only {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(20,18,16,0.35);
}
.root-region--no-table {
  opacity: 0.55;
}
.root-region--no-table span {
  color: var(--accent);
}
.profile-photo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  min-width: 0;
}
.profile-photo-preview {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(184,174,160,0.15);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--accent);
  font-family: var(--font-brand);
  font-size: 26px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}
.profile-photo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-photo-btn {
  cursor: pointer;
  margin: 0;
}
.legal-copy {
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-wrap;
}
.logout-line { margin-top: 20px; }
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 320;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

@media (min-width: 901px) {
  .app-shell.sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .app-shell.sidebar-collapsed .sidebar {
    padding: 16px 10px;
    justify-items: center;
    gap: 12px;
  }
  .app-shell.sidebar-collapsed .side-brand {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 0 0 4px;
  }
  .app-shell.sidebar-collapsed .side-brand img {
    width: 42px;
    height: 42px;
  }
  .app-shell.sidebar-collapsed .sidebar-text,
  .app-shell.sidebar-collapsed .side-engine-label,
  .app-shell.sidebar-collapsed .side-label,
  .app-shell.sidebar-collapsed .history-list,
  .app-shell.sidebar-collapsed .usage-head,
  .app-shell.sidebar-collapsed .usage-track,
  .app-shell.sidebar-collapsed .usage-foot > span,
  .app-shell.sidebar-collapsed .side-legal,
  .app-shell.sidebar-collapsed .account-button > svg {
    display: none !important;
  }
  .app-shell.sidebar-collapsed .side-engine-nav {
    width: 46px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 3px;
    justify-self: center;
  }
  .app-shell.sidebar-collapsed .side-engine-nav button {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    gap: 0;
  }
  .app-shell.sidebar-collapsed .side-engine-icon {
    display: grid;
    place-items: center;
  }
  .app-shell.sidebar-collapsed .sidebar-collapse,
  .app-shell.sidebar-collapsed .new-chat-btn,
  .app-shell.sidebar-collapsed .install-app-btn,
  .app-shell.sidebar-collapsed .side-icon-trigger,
  .app-shell.sidebar-collapsed .plan-shortcut,
  .app-shell.sidebar-collapsed .account-button {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    gap: 0;
    display: grid;
    place-items: center;
    justify-content: center;
    align-content: center;
    border-radius: 16px;
    box-sizing: border-box;
    justify-self: center;
    margin: 0 auto;
  }
  .app-shell.sidebar-collapsed .sidebar-collapse svg,
  .app-shell.sidebar-collapsed .new-chat-btn svg,
  .app-shell.sidebar-collapsed .install-app-btn svg,
  .app-shell.sidebar-collapsed .side-icon-trigger svg,
  .app-shell.sidebar-collapsed .plan-shortcut svg {
    width: 22px;
    height: 22px;
    margin: 0;
  }
  .app-shell.sidebar-collapsed .new-chat-btn {
    justify-content: center;
  }
  .app-shell.sidebar-collapsed .history-collapsed-trigger {
    display: grid;
  }
  .app-shell.sidebar-collapsed .side-section {
    width: 100%;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto;
    grid-auto-rows: min-content;
    align-content: start;
    justify-items: center;
    min-height: 0;
  }
  .app-shell.sidebar-collapsed .usage-card,
  .app-shell.sidebar-collapsed .account-card {
    width: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    justify-self: center;
    margin-inline: auto;
  }
  .app-shell.sidebar-collapsed .usage-foot {
    display: block;
  }
  .app-shell.sidebar-collapsed .account-button {
    grid-template-columns: 1fr;
  }
  .app-shell.sidebar-collapsed .account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
  .app-shell.sidebar-collapsed .account-menu {
    position: fixed;
    left: 16px;
    right: auto;
    /* 18px da base + 40px do botao + 8px de respiro. */
    bottom: 66px;
    width: min(224px, calc(100vw - 32px));
  }
  .app-shell.sidebar-collapsed .sidebar-collapse svg {
    transform: rotate(180deg);
  }
  .app-shell.sidebar-collapsed .sidebar [data-tooltip] {
    position: relative;
  }
  .app-shell.sidebar-collapsed .sidebar [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    min-width: max-content;
    max-width: 220px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 12px 32px rgba(0,0,0,0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 90;
  }
  .app-shell.sidebar-collapsed .sidebar [data-tooltip]:hover::after,
  .app-shell.sidebar-collapsed .sidebar [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -50%);
  }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(260px, calc(100vw - 44px));
    height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
    z-index: 40;
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }
  .app-shell .sidebar.is-open { transform: translateX(0); }
  .sidebar-collapse { display: none !important; }
  .side-close { display: inline-grid !important; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 12px 14px; min-height: 66px; }
  .chat-scroll { padding: 24px 14px 18px; }
  .composer {
    width: calc(100% - 28px);
    margin-bottom: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 12px 12px 15px;
    column-gap: 10px;
  }
  .send-btn { width: 46px; height: 46px; }
  .settings-panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    overflow-x: auto;
  }
  .root-ops { grid-template-columns: 1fr; }
  .root-op-section--scroll .root-op-buttons { max-height: none; overflow: visible; }
  .root-region-list { max-height: clamp(132px, 28dvh, 220px); }
  .account-menu button { min-height: 44px; }
}

/* Em janelas realmente baixas, preserva uma area util para o historico sem
   retirar sua flexibilidade. O rodape continua encostado na base quando cabe;
   se a soma dos blocos ultrapassar a viewport, a propria sidebar rola. */
@media (max-width: 900px) and (max-height: 680px) {
  .sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell .side-section {
    min-height: clamp(150px, 42dvh, 190px);
  }
}

@media (min-width: 901px) and (max-height: 680px) {
  .app-shell:not(.sidebar-collapsed) .sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell:not(.sidebar-collapsed) .side-section {
    min-height: clamp(150px, 42dvh, 190px);
  }
}

@media (max-width: 640px) {
  .sidebar {
    padding: 14px 12px;
    gap: 8px;
    display: flex;
    flex-direction: column;
  }
  .side-brand { padding-bottom: 6px; }
  .new-chat-btn { min-height: 42px; border-radius: 14px; }
  .install-app-btn { min-height: 40px; border-radius: 14px; }
  .side-section {
    flex: 1 1 0;
    min-height: 0;
    gap: 8px;
  }
  .history-list {
    flex: 1 1 0;
    min-height: 0;
    padding: 2px 2px 2px 0;
  }
  .history-item {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) 62px;
    padding: 6px 4px 6px 10px;
    gap: 6px;
  }
  .history-actions {
    width: 62px;
    min-width: 62px;
    gap: 6px;
  }
  .history-actions button {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  .usage-card { padding: 10px 12px 12px; border-radius: 18px; }
  .account-card { padding: 6px; border-radius: 16px; }
  .settings-shortcut { min-height: 40px; }
  .side-legal { padding-bottom: env(safe-area-inset-bottom); }

  .auth-screen {
    justify-items: stretch;
    overflow-x: hidden;
    padding: 16px;
  }
  .auth-shell {
    justify-self: center;
    width: 100%;
    max-width: 430px;
  }
  .auth-brand,
  .auth-card,
  .auth-legal { min-width: 0; }
  .auth-card { padding: 18px; border-radius: 24px; }
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; }
  .topbar h1 { font-size: 17px; }
  .topbar p { display: none; }
  .empty-state { margin-top: 4vh; }
  .empty-state h2 { font-size: 34px; }
  .example-chips { grid-template-columns: 1fr; max-width: 100%; }
  .example-chips button { width: 100%; }
  .example-chips button:last-child { width: 100%; justify-self: stretch; }
  .user-bubble { max-width: 92%; }
  .nota-grid { grid-template-columns: 1fr; }
  .nota-cell { min-height: 72px; }
  .plan-grid { grid-template-columns: 1fr; }
  .composer textarea {
    min-height: 72px;
    padding: 12px 10px 8px;
  }
  .composer-meta {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .composer-tools {
    flex-wrap: nowrap;
  }
  .composer-tool {
    padding: 6px 9px;
  }
  .modal { padding: 10px; align-items: center; }
  .modal-panel,
  .settings-panel { max-height: calc(100dvh - 20px); border-radius: 24px; }
  .settings-content { padding: 14px; }
  .settings-view.is-active { gap: 12px; }
  .settings-card { padding: 14px; gap: 12px; }
  .logout-line { margin-top: 12px; }
  .history-actions { opacity: 1; }
  .root-stats { grid-template-columns: 1fr; }
  .root-toolbar,
  .root-user {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .root-toolbar { display: grid; }
  .root-op-buttons { display: grid; grid-template-columns: 1fr; }
  .root-op-buttons button { width: 100%; }
  .root-op-section {
    padding: 11px;
    border-radius: 14px;
  }
  .root-op-section--scroll .root-op-buttons {
    max-height: none;
    overflow: visible;
  }
  .root-region-list {
    grid-template-columns: 1fr;
    max-height: min(260px, 34dvh);
  }
  .root-region {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .root-region span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .root-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    justify-content: stretch;
  }
  .root-actions button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Ajuste v15: textareas das configurações fixos, responsivos e sem alça de redimensionamento */
textarea.input {
  box-sizing: border-box;
  width: 100%;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,0.35) transparent;
}

textarea.input::-webkit-scrollbar {
  width: 8px;
}

textarea.input::-webkit-scrollbar-track {
  background: transparent;
}

textarea.input::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,0.35);
  border-radius: 999px;
}

textarea.input[data-support-message] {
  height: auto;
  min-height: 104px;
  max-height: min(232px, 32dvh);
}

textarea.input[data-feedback-message] {
  height: auto;
  min-height: 132px;
  max-height: min(232px, 32dvh);
}

@media (max-width: 640px) {
  textarea.input[data-support-message] {
    height: auto;
    min-height: 96px;
    max-height: min(176px, 28dvh);
  }

  textarea.input[data-feedback-message] {
    height: auto;
    min-height: 112px;
    max-height: min(188px, 30dvh);
  }
}

/* Ajuste v17: feedback visual e estado do Painel Root */
.modal:not([hidden]) {
  animation: modalBackdropIn 160ms ease both;
}

.modal:not([hidden]) .modal-panel,
.modal:not([hidden]) .settings-panel {
  animation: modalPanelIn 180ms cubic-bezier(.2,.8,.2,1) both;
}

.modal.is-closing {
  animation: modalBackdropOut 120ms ease both;
}

.modal.is-closing .modal-panel,
.modal.is-closing .settings-panel {
  animation: modalPanelOut 120ms ease both;
}

.root-stat,
.root-user,
.root-region,
.root-op-buttons button,
.root-actions button,
.settings-tab,
.icon-btn {
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.root-user.is-busy,
.root-region.is-busy {
  opacity: .64;
  pointer-events: none;
}

.root-user.is-removing {
  opacity: 0;
  transform: translateX(-12px) scale(.985);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.root-actions button:disabled,
.root-region button:disabled,
.root-op-buttons button:disabled,
.root-toolbar button:disabled {
  opacity: .58;
  cursor: progress;
  transform: none;
}

button.is-loading.has-loading-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--button-loading-min-width, auto);
}

button.is-loading.has-loading-content::before {
  content: none;
}

.button-loading-spinner {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  opacity: .85;
}

.button-loading-label {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
}

.root-stat span {
  min-height: 1.2em;
}

.root-protected {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(184,174,160,0.08);
  color: var(--accent);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}

.root-user.is-root-user {
  border-color: rgba(184,174,160,0.32);
  background: rgba(184,174,160,0.055);
}

.toast {
  transition: opacity 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.toast.is-error {
  border-color: rgba(255,140,140,0.58);
  color: #ffdada;
  background: rgba(52,24,24,0.96);
}

@keyframes authScreenIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appSurfaceIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes authCardSwitch {
  from { opacity: .76; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .root-protected {
    width: 100%;
    justify-content: center;
  }

}


/* Ajuste v19: dialog próprio do Coringa para substituir prompt/confirm/alert nativos */
body.has-app-dialog {
  overflow: hidden;
}

.app-dialog {
  position: fixed;
  inset: 0;
  /* Confirmações globais também precisam cobrir o console Root (250). */
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(10px);
  animation: modalBackdropIn 140ms ease both;
}

.app-dialog.is-closing {
  animation: modalBackdropOut 120ms ease both;
}

.app-dialog-panel {
  --dialog-inset: 6px;
  --dialog-inner-pad: 16px;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: rgba(20, 18, 16, 0.98);
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.56);
  padding: var(--dialog-inset);
  animation: modalPanelIn 160ms cubic-bezier(.2,.8,.2,1) both;
}
.app-dialog-scroll {
  width: 100%;
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,.42) rgba(184,174,160,.045);
  border-radius: calc(var(--radius-panel) - var(--dialog-inset));
  padding: var(--dialog-inner-pad);
  display: grid;
  gap: 12px;
}
.app-dialog-scroll::-webkit-scrollbar { width: 8px; }
.app-dialog-scroll::-webkit-scrollbar-track { background: rgba(184,174,160,.045); border-radius: 999px; }
.app-dialog-scroll::-webkit-scrollbar-thumb { background: rgba(184,174,160,.42); border: 2px solid transparent; border-radius: 999px; background-clip: content-box; }

.app-dialog.is-closing .app-dialog-panel {
  animation: modalPanelOut 120ms ease both;
}

.app-dialog-kicker {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.app-dialog-panel h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 30px;
  line-height: 1.05;
  color: var(--text);
}

.app-dialog-message,
.app-dialog-hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.app-dialog-hint {
  font-size: 13px;
}

.app-dialog-expected {
  border: 1px solid rgba(184,174,160,.35);
  border-radius: 16px;
  background: rgba(184,174,160,.08);
  color: var(--text);
  padding: 12px 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
  user-select: all;
}

.app-dialog-input {
  width: 100%;
  min-height: 48px;
}

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

.app-dialog-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.app-dialog-form label > span { color: var(--text); font-weight: 700; }
.app-dialog-form label > small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.app-dialog-form .app-dialog-field-wide { grid-column: 1 / -1; }
.app-dialog-form textarea.app-dialog-input {
  min-height: 72px;
  max-height: min(156px, 24dvh);
  resize: none;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,.42) transparent;
}
.app-dialog-form textarea.app-dialog-input::-webkit-scrollbar { width: 6px; }
.app-dialog-form textarea.app-dialog-input::-webkit-scrollbar-track { background: transparent; }
.app-dialog-form textarea.app-dialog-input::-webkit-scrollbar-thumb { background: rgba(184,174,160,.42); border-radius: 999px; }
.app-dialog-form input[type="date"] { color-scheme: dark; }
.app-dialog-form .input[aria-invalid="true"] { border-color: rgba(255,140,140,.72); box-shadow: 0 0 0 3px rgba(255,100,100,.09); }

.app-dialog-actions {
  position: sticky;
  z-index: 2;
  bottom: calc(var(--dialog-inner-pad) * -1);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px calc(var(--dialog-inner-pad) * -1) 0;
  padding: 12px var(--dialog-inner-pad) var(--dialog-inner-pad);
  border-top: 1px solid rgba(184,174,160,.14);
  background: rgba(20,18,16,.995);
}

.app-dialog-ok {
  min-width: 138px;
  font-weight: 800;
}

.app-dialog--danger .app-dialog-panel {
  border-color: rgba(255,140,140,.38);
}

.app-dialog--danger .app-dialog-kicker {
  color: #ffb0b0;
}

@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalPanelOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(7px) scale(.985); }
}

@media (max-width: 640px) {
  .app-dialog {
    place-items: center;
    align-items: center;
    justify-items: center;
    padding: 14px;
  }

  .app-dialog-panel {
    --dialog-inset: 5px;
    --dialog-inner-pad: 13px;
    width: min(520px, 100%);
    max-width: 100%;
    max-height: calc(100dvh - 28px);
    border-radius: 22px;
    padding: var(--dialog-inset);
  }

  .app-dialog-scroll {
    max-height: calc(100dvh - 38px);
    gap: 11px;
  }

  .app-dialog-actions {
    bottom: calc(var(--dialog-inner-pad) * -1);
    padding-bottom: var(--dialog-inner-pad);
  }

  .app-dialog-panel h3 {
    font-size: 26px;
  }

  .app-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-dialog-actions button {
    width: 100%;
  }

  .app-dialog-form { grid-template-columns: minmax(0, 1fr); }
  .app-dialog-form .app-dialog-field-wide { grid-column: 1; }
}

/* Refinamento v24: home limpa, Guia e seletor root de região */
.app-shell.is-empty-workspace .empty-state {
  margin-top: 7vh;
}
.app-shell.is-empty-workspace .empty-state h2 {
  font-size: clamp(30px, 4.4vw, 46px);
}
.app-shell.is-empty-workspace .empty-state p {
  max-width: 560px;
  font-size: clamp(16px, 1.45vw, 17px);
  line-height: 1.5;
}
.app-shell.is-empty-workspace .chat-scroll {
  padding-bottom: 14px;
}
.composer {
  position: relative;
}
.composer-popovers {
  position: absolute;
  left: 20px;
  right: 80px;
  top: var(--popover-top, calc(100% + 10px));
  z-index: 20;
  pointer-events: none;
}
.composer-popover {
  width: min(560px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: rgba(20, 18, 16, 0.98);
  box-shadow: 0 24px 80px rgba(0,0,0,0.42);
  padding: 10px;
  display: grid;
  gap: 7px;
  pointer-events: auto;
  animation: composerPopoverIn 140ms ease both;
}
.composer-popover[hidden] { display: none !important; }
.composer-popover-title {
  color: var(--accent);
  font-family: var(--font-brand);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 8px 3px;
}
.composer-popover button {
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  text-align: left;
}
.composer-popover button:hover,
.composer-popover button.is-active {
  border-color: var(--border);
  background: rgba(184,174,160,.08);
}
.composer-popover button strong {
  font-weight: 800;
}
.composer-popover button span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.region-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.region-picker-grid button {
  text-align: center;
  place-items: center;
  padding: 9px 6px;
}
.region-picker-grid button strong {
  font-family: var(--font-brand);
  font-size: 16px;
}
.region-picker-grid button span {
  font-size: 10px;
}
.composer-tool.is-root-region {
  cursor: pointer;
}
@keyframes composerPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 901px) {
  .app-shell.is-empty-workspace .workspace {
    grid-template-rows: auto auto auto;
    align-content: start;
  }
  .app-shell.is-empty-workspace .composer {
    margin-top: 18px;
    margin-bottom: 0;
  }
}
@media (max-width: 900px) {
  .composer-popovers {
    top: auto;
    bottom: calc(100% + 10px);
    left: 14px;
    right: 14px;
  }
  .composer-popover {
    width: 100%;
    max-height: min(54vh, 360px);
    overflow: auto;
  }
}
@media (max-width: 640px) {
  .empty-state {
    margin-top: 5vh;
  }
  .empty-logo img {
    width: 54px;
    height: 54px;
    border-radius: 19px;
  }
  .empty-state h2,
  .app-shell.is-empty-workspace .empty-state h2 {
    font-size: 32px;
    line-height: 1.08;
    margin-top: 16px;
  }
  .empty-state p,
  .app-shell.is-empty-workspace .empty-state p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 94%;
  }
  .region-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Ajuste final v24: popovers abrem para baixo só na home desktop; no rodapé abrem acima. */
.composer-popovers {
  top: auto;
  bottom: calc(100% + 10px);
}
@media (min-width: 901px) {
  .app-shell.is-empty-workspace .composer-popovers {
    top: var(--popover-top, calc(100% + 10px));
    bottom: auto;
  }
}


/* Refinamento v25: Região compacta sem subir a home */
.region-popover {
  width: min(680px, 100%);
  max-height: min(42vh, 300px);
  overflow: auto;
}

.region-picker-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}

.region-picker-grid button {
  min-height: 42px;
  padding: 7px 6px;
  border-radius: 13px;
}

.region-picker-grid button strong {
  font-size: 16px;
  line-height: 1;
}

.region-picker-grid button span {
  display: none !important;
}

@media (max-width: 900px) {
  .composer-popover {
    padding: 9px;
    border-radius: 20px;
  }

  .region-popover {
    max-height: min(42vh, 310px);
  }

  .region-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .region-picker-grid button {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .empty-state h2,
  .app-shell.is-empty-workspace .empty-state h2 {
    white-space: nowrap;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.04;
    letter-spacing: -0.01em;
  }
}


/* Refinamento v26: menu regional como extensão compacta da barra */
.composer-popovers {
  left: 0;
  right: 0;
  pointer-events: none;
}

.composer-popover {
  width: var(--popover-width, 232px);
  margin-left: var(--popover-left, 20px);
  border-radius: 13px;
  border-color: rgba(184,174,160,0.24);
  background: rgba(24, 22, 18, 0.94);
  box-shadow: 0 18px 48px rgba(0,0,0,0.36);
  backdrop-filter: blur(12px);
  padding: 7px 10px;
  gap: 0;
  color: var(--muted);
}

.composer-popover-title {
  display: none !important;
}

.composer-popover button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 2px;
  text-align: left;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 600;
  font-family: inherit;
}

.region-picker-list button + button {
  border-top: 1px solid rgba(255, 246, 232, 0.08);
}

.composer-popover button strong,
.composer-popover button span {
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
  color: inherit;
  font-family: inherit;
}

.popover-icon {
  width: 16px;
  min-width: 16px;
  text-align: center;
  opacity: .78;
  color: currentColor;
  font-size: 12px;
}

.composer-popover button:hover,
.composer-popover button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.region-popover {
  width: var(--popover-width, 112px);
  max-height: min(36vh, 300px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 7px 10px;
}

.region-picker-grid,
.region-picker-list {
  display: block;
}

.region-picker-list button,
.region-picker-grid button {
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
}

.region-picker-grid button strong,
.region-picker-grid button span {
  display: none !important;
}

.region-picker-list button.is-active,
.region-picker-grid button.is-active {
  color: var(--text);
}

.region-picker-list button.is-blocked,
.region-picker-grid button.is-blocked {
  opacity: .48;
}

.composer-tool[aria-haspopup="true"]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 2px solid rgba(184,174,160,0.9);
  border-bottom: 2px solid rgba(184,174,160,0.9);
  transform: translateY(-1px) rotate(45deg);
  transition: transform 140ms ease;
  opacity: .95;
}

.composer-tool[aria-haspopup="true"]:hover::after,
.composer-tool[aria-haspopup="true"][aria-expanded="true"]::after {
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

.composer-tool[aria-haspopup="true"][aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

@media (max-width: 900px) {
  .composer-popovers {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + 10px);
  }
  .composer-popover {
    width: var(--popover-width, 232px);
    max-width: calc(100% - 28px);
    padding: 8px 10px;
    border-radius: 14px;
  }
  .composer-popover button {
    min-height: 38px;
    font-size: 12px;
  }
  .region-popover {
    width: var(--popover-width, 116px);
    max-height: min(42vh, 320px);
  }
}

.popover-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Refinamento v27: dropdowns ancorados, compactos e sem painel vazio */
.composer-popover {
  pointer-events: auto;
  font-size: 12px;
  line-height: 1;
}

.composer-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(184,174,160,0.22);
  border-top: 1px solid rgba(184,174,160,0.22);
  background: rgba(24, 22, 18, 0.96);
}

.composer-popovers {
  z-index: 45;
}

.composer-popover button,
.composer-popover button span,
.composer-popover button strong {
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  display: flex !important;
  visibility: visible !important;
  opacity: 1;
}

.composer-popover button {
  min-height: 34px;
  padding: 8px 2px;
}

.popover-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px;
  min-width: 15px;
  height: 15px;
  color: var(--muted);
  opacity: .86;
}

.popover-icon svg,
.popover-icon svg path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-popover button:hover {
  color: var(--text);
}

.composer-popover button:hover .popover-icon {
  color: var(--text);
}

.region-popover {
  width: var(--popover-width, 84px);
  min-width: 78px;
  max-height: 184px;
  padding: 5px 8px;
}

.region-picker-list,
.region-picker-grid {
  display: block !important;
  width: 100%;
}

.region-picker-list button,
.region-picker-grid button {
  min-height: 28px;
  padding: 7px 2px;
  font-size: 12px;
  justify-content: flex-start;
  color: var(--muted);
}

.region-picker-list button + button,
.region-picker-grid button + button {
  border-top: 1px solid rgba(255,246,232,.08);
}

.region-picker-list button.is-active,
.region-picker-grid button.is-active {
  color: var(--text);
}

@media (max-width: 900px) {
  .composer-popover::before {
    top: auto;
    bottom: -6px;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid rgba(184,174,160,0.22);
    border-bottom: 1px solid rgba(184,174,160,0.22);
  }
  .region-popover {
    width: var(--popover-width, 84px);
    max-width: 84px;
    max-height: 174px;
  }
  .composer-popover button {
    min-height: 34px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .region-popover {
    width: 82px;
    max-width: 82px;
  }
}

/* Refinamento v28: popover regional ancorado ao composer no mobile */
@media (max-width: 900px) {
  .composer-popovers {
    top: auto !important;
    bottom: 58px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60;
  }

  .app-shell.is-empty-workspace .composer-popovers {
    top: auto !important;
    bottom: 58px !important;
  }

  .composer-popover {
    margin-left: var(--popover-left, 18px);
    box-shadow: 0 16px 42px rgba(0,0,0,.42);
  }

  .composer-popover::before {
    top: auto !important;
    bottom: -6px !important;
    left: 18px;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(184,174,160,.22) !important;
    border-bottom: 1px solid rgba(184,174,160,.22) !important;
  }

  .region-popover {
    width: var(--popover-width, 74px) !important;
    min-width: 70px !important;
    max-width: 74px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 5px 7px !important;
    scrollbar-width: none;
  }

  .region-popover::-webkit-scrollbar,
  .region-picker-list::-webkit-scrollbar,
  .region-picker-grid::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .region-picker-list button,
  .region-picker-grid button {
    min-height: 26px !important;
    padding: 6px 2px !important;
    font-size: 12px !important;
    letter-spacing: .03em !important;
  }
}

@media (max-width: 420px) {
  .composer-popovers,
  .app-shell.is-empty-workspace .composer-popovers {
    bottom: 56px !important;
  }

  .region-popover {
    width: 72px !important;
    min-width: 68px !important;
    max-width: 72px !important;
    max-height: 136px !important;
  }
}


/* v29: seletor de região da barra aparece somente para root */
.composer-tool[hidden] {
  display: none !important;
}


/* v30: região visível para usuário comum, mas sem seletor */
.composer-tool--region.is-static-region {
  cursor: default;
  pointer-events: auto;
  color: var(--muted);
  border-color: rgba(184,174,160,0.18);
  background: rgba(184,174,160,0.07);
}

.composer-tool--region.is-static-region:hover,
.composer-tool--region.is-static-region:focus-visible {
  color: var(--accent) !important;
  border-color: var(--border-strong) !important;
  background: rgba(184,174,160,0.11) !important;
}

.composer-tool--region.is-static-region::after {
  display: none !important;
  content: none !important;
}


/* v31: seta visual também no seletor de região e placeholder mais "Coringa" */
.region-popover::before {
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

@media (max-width: 900px) {
  .region-popover::before {
    left: 50% !important;
    bottom: -6px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
}


/* === Meus chamados (caixa de suporte do usuario) — adicionado no fechamento P0 === */
.support-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.support-ticket {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(184, 174, 160, 0.04);
}
.support-ticket-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
  font-size: 12px; color: var(--muted);
}
.support-status {
  text-transform: capitalize;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 11px; color: var(--text);
}
.support-status.is-respondido { color: var(--accent); border-color: var(--border-strong); }
.support-status.is-fechado { opacity: 0.7; }
.support-status.is-aberto { color: #f2c75c; }
.support-status.is-aguardando_usuario { color: #9cc9ff; border-color: rgba(120,180,255,.42); }
.support-status.is-resolvido { opacity: .72; }
.support-ticket-msg { font-size: 14px; color: var(--text); line-height: 1.45; }
.support-reply {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 14px; color: var(--text); line-height: 1.45;
}
.support-reply strong { color: var(--accent); }

@media (max-width: 760px) {
  .root-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .root-recovery, .root-workspace-head { align-items: stretch; flex-direction: column; }
  .root-recovery-actions { justify-content: stretch; }
  .root-recovery-actions button { flex: 1 1 180px; }
  .support-message { max-width: 94%; }
  .root-users-toolbar { align-items: stretch; flex-direction: column; }
  .root-user-search, .root-user-filter { width: 100%; }
  .root-users-pagination { align-items: stretch; flex-direction: column; }
  .root-users-pagination .secondary-btn { width: 100%; }
}

@media (max-width: 440px) {
  .root-stats { grid-template-columns: 1fr; }
  .root-recovery-actions { display: grid; grid-template-columns: 1fr; }
  .root-user-id { padding-left: 28px; }
  .support-ticket-actions { display: grid; grid-template-columns: 1fr; }
  .support-ticket-actions button { width: 100%; }
  .root-result-list > div { display: grid; }
  .root-history-list li,
  .root-history-row { grid-template-columns: 1fr; gap: 3px; }
  .root-payment-bulk,
  .root-payment-actions,
  .root-feedback-actions { display: grid; grid-template-columns: 1fr; }
  .root-payment-bulk button,
  .root-payment-actions button,
  .root-feedback-actions button { width: 100%; }
  .root-payment-card header,
  .root-feedback-card header { flex-wrap: wrap; }
  .root-payment-details dl > div,
  .root-event-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* link de download estilizado como botao (material) */
a.secondary-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.settings-card .material-btn { margin-top: 10px; }

/* ============================================================
   Home: topo limpo do Coringa + status só quando cai
   ============================================================ */
.topbar [data-thread-title] { display: none; }
.topbar .icon-btn[data-open-settings] { display: none; }
.topbar [data-api-status] { display: none; }

/* desktop: sem barra de topo (o banner "Sem conexão" cobre o estado offline) */
@media (min-width: 901px) {
  .topbar { display: none; }
}

/* Banner "Sem conexão": mesmo padrão visual do banner de manutenção,
   com tom de alerta. Some sozinho quando o servidor volta (retry 15s). */
.offline-banner {
  border-color: rgba(226, 118, 65, 0.38);
  background:
    linear-gradient(135deg, rgba(52, 30, 18, 0.97), rgba(20, 16, 14, 0.97));
}
.offline-banner strong {
  color: #f0955e;
  border-color: rgba(226, 118, 65, 0.30);
  background: rgba(226, 118, 65, 0.10);
}

/* ============================================================
   Lateral recolhida: ícones um pouco menores (logo preservada)
   ============================================================ */
@media (min-width: 901px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .side-brand img { width: 38px; height: 38px; }
  .app-shell.sidebar-collapsed .sidebar-collapse,
  .app-shell.sidebar-collapsed .new-chat-btn,
  .app-shell.sidebar-collapsed .install-app-btn,
  .app-shell.sidebar-collapsed .side-icon-trigger,
  .app-shell.sidebar-collapsed .plan-shortcut,
  .app-shell.sidebar-collapsed .account-button {
    width: 40px; height: 40px; min-height: 40px; border-radius: 12px;
  }
  .app-shell.sidebar-collapsed .sidebar-collapse svg,
  .app-shell.sidebar-collapsed .new-chat-btn svg,
  .app-shell.sidebar-collapsed .install-app-btn svg,
  .app-shell.sidebar-collapsed .side-icon-trigger svg,
  .app-shell.sidebar-collapsed .plan-shortcut svg {
    width: 19px; height: 19px;
  }
}

/* ============================================================
   Ajuste fino home: logo aberta = recolhida + centralizar desktop
   ============================================================ */
/* logo da lateral aberta no mesmo tamanho da recolhida (38px) */
.side-brand img { width: 38px; height: 38px; }

/* desktop: boas-vindas + campo centralizados na vertical.
   mobile preserva menu compacto e campo no rodapé. */
@media (min-width: 901px) {
  .app-shell.is-empty-workspace .workspace { align-content: center; }
  .app-shell.is-empty-workspace .empty-state { margin-top: 0; }
}

/* ============================================================
   Modais de confirmação: título mais harmônico (menor)
   vale para Substituir texto, Excluir usuário, Excluir conta, etc.
   ============================================================ */
.app-dialog-panel h3 { font-size: 22px; }
@media (max-width: 640px) {
  .app-dialog-panel h3 { font-size: 20px; }
}

/* ============================================================
   Mobile/tablet: bloco de boas-vindas centralizado na vertical
   (campo segue no rodapé)
   ============================================================ */
@media (max-width: 900px) {
  .app-shell.is-empty-workspace .chat-scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .app-shell.is-empty-workspace .empty-state {
    margin-top: 0;
    margin-bottom: 0;
  }
}


/* ============================================================
   Hotfix v39: grid fix desktop Chrome/Firefox
   - mantém o chat sempre na linha rolável
   - mantém o composer sempre na linha inferior após mensagens
   - evita o textarea/composer esticar quando a topbar está oculta
   - preserva mobile/PWA instalado
   ============================================================ */
@media (min-width: 901px) {
  .workspace > .topbar { grid-row: 1; }
  .workspace > .maintenance-banner { grid-row: 2; }
  .workspace > .chat-scroll {
    grid-row: 3;
    min-height: 0;
  }
  .workspace > .composer {
    grid-row: 4;
    align-self: end;
    flex: none;
  }

  .workspace {
    height: var(--app-height);
    min-height: 0;
    overflow: hidden;
  }

  .chat-scroll {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  body:not(.server-offline) .topbar {
    display: none;
  }

  body:not(.server-offline) .workspace {
    grid-template-rows: 0 auto minmax(0, 1fr) auto;
  }

  body.server-offline .workspace {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  body:not(.server-offline) .app-shell.is-empty-workspace .workspace {
    grid-template-rows: 0 auto auto auto;
    align-content: center;
  }

  .app-shell.is-empty-workspace .chat-scroll {
    position: relative;
    top: -22px;
    overflow: visible;
    padding-bottom: 14px;
  }

  .app-shell.is-empty-workspace .composer {
    margin-top: 18px;
    margin-bottom: 0;
    top: -22px;
  }
}

/* Hotfix v40: dropdowns desktop ancorados no botão e seta do seletor de estado visível
   - Não altera mobile normal (max-width: 900px)
   - Não altera lógica root/usuário; apenas posicionamento visual dos popovers
*/
@media (min-width: 901px) {
  /* Depois que existe conversa, o composer fica no rodapé. O popover precisa sair da fileira dos botões,
     não do topo do composer inteiro, para não abrir longe do link. */
  .app-shell:not(.is-empty-workspace) .composer-popovers {
    top: auto !important;
    bottom: 58px !important;
  }

  .app-shell:not(.is-empty-workspace) .composer-popover::before {
    top: auto !important;
    bottom: -6px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(184,174,160,.22) !important;
    border-bottom: 1px solid rgba(184,174,160,.22) !important;
    display: block !important;
  }

  /* Na tela inicial, mantém o comportamento correto: popover abre para baixo, encostado no respectivo botão. */
  .app-shell.is-empty-workspace .composer-popovers {
    top: var(--popover-top, calc(100% + 10px)) !important;
    bottom: auto !important;
  }

  .app-shell.is-empty-workspace .composer-popover::before {
    top: -6px !important;
    bottom: auto !important;
    border-left: 1px solid rgba(184,174,160,.22) !important;
    border-top: 1px solid rgba(184,174,160,.22) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    display: block !important;
  }

  /* O seletor de estados tinha overflow no próprio balão, o que cortava a setinha.
     O scroll fica na lista interna; o balão pode exibir a seta. */
  .region-popover {
    overflow: visible !important;
  }

  .region-popover::before {
    display: block !important;
    z-index: 1;
  }

  .region-popover .region-picker-list,
  .region-popover .region-picker-grid {
    max-height: 184px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }

  .region-popover .region-picker-list::-webkit-scrollbar,
  .region-popover .region-picker-grid::-webkit-scrollbar {
    width: 6px;
  }
}

/* Hotfix v41: seletor de região mais compacto e seta visível também em telas pequenas/mobile
   - Mantém a lógica existente: o seletor de região continua aparecendo apenas para root.
   - Não mexe em app.js, API, Mercado Pago, motor ou mobile estrutural.
   - Corrige o balão de estados para ter largura próxima das siglas e não cortar a setinha. */
.region-popover {
  width: var(--popover-width, 54px) !important;
  min-width: var(--popover-width, 50px) !important;
  max-width: var(--popover-width, 54px) !important;
  overflow: visible !important;
  padding: 5px 6px !important;
}

.region-popover::before {
  display: block !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  z-index: 1;
  pointer-events: none;
}

.region-popover .region-picker-list,
.region-popover .region-picker-grid {
  width: 100% !important;
  max-height: 168px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
}

.region-popover .region-picker-list::-webkit-scrollbar,
.region-popover .region-picker-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.region-popover .region-picker-list button,
.region-popover .region-picker-grid button {
  min-height: 26px !important;
  padding: 6px 0 !important;
  justify-content: center !important;
  font-size: 12px !important;
  letter-spacing: .03em !important;
}

@media (max-width: 900px) {
  .region-popover {
    width: var(--popover-width, 54px) !important;
    min-width: var(--popover-width, 50px) !important;
    max-width: var(--popover-width, 54px) !important;
    overflow: visible !important;
  }

  .region-popover::before {
    top: auto !important;
    bottom: -6px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(184,174,160,.22) !important;
    border-bottom: 1px solid rgba(184,174,160,.22) !important;
    background: rgba(24, 22, 18, 0.96) !important;
  }

  .region-popover .region-picker-list,
  .region-popover .region-picker-grid {
    max-height: 148px !important;
  }
}

@media (max-width: 420px) {
  .region-popover {
    width: var(--popover-width, 54px) !important;
    min-width: var(--popover-width, 50px) !important;
    max-width: var(--popover-width, 54px) !important;
  }

  .region-popover .region-picker-list,
  .region-popover .region-picker-grid {
    max-height: 138px !important;
  }
}

@media (max-width: 640px) {
  .maintenance-banner {
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
    /* anula o max-width do desktop (fit-content): no mobile o banner
       ocupa a largura util inteira, como ja era antes. */
    max-width: none;
    margin: 10px auto 0;
    padding: 10px 11px;
    border-radius: 16px;
    gap: 7px;
  }
  .maintenance-banner strong {
    justify-self: start;
    white-space: normal;
  }
  .maintenance-banner span {
    font-size: 13px;
    line-height: 1.38;
  }
}

/* Botao de olho para revelar senha (aditivo, nao altera comportamento do campo) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > .input { width: 100%; padding-right: 46px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px;
  transition: color 160ms ease, background 160ms ease;
}
.pw-toggle:hover { color: var(--text); background: rgba(184,174,160,0.10); }
.pw-toggle:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }

/* Front polish v52: composer mobile compacto e fixo no rodape visual. */
@media (max-width: 900px) {
  .workspace > .composer,
  .app-shell.is-empty-workspace .composer {
    align-self: end;
    height: auto;
    min-height: 112px;
    max-height: none;
  }

  .composer {
    grid-template-rows: auto auto;
    align-items: start;
  }

  .composer textarea,
  .app-shell.is-empty-workspace .composer textarea {
    align-self: start;
    min-height: 56px;
    max-height: 128px;
  }

  .composer-meta {
    align-self: start;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .composer textarea.is-scrollable {
    scrollbar-width: none;
  }

  .composer textarea.is-scrollable::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .composer,
  .app-shell.is-empty-workspace .composer {
    width: calc(100% - 28px);
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "input input"
      "meta submit";
    padding: 14px 14px 12px 18px;
    row-gap: 8px;
    border-radius: 24px;
  }

  .composer textarea,
  .app-shell.is-empty-workspace .composer textarea {
    min-height: 56px;
    max-height: 118px;
    padding: 10px 0 6px 0;
  }

  .send-btn {
    align-self: start;
    margin-top: 12px;
  }

  .composer-meta {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .composer-tools {
    flex-wrap: wrap;
  }

  .composer-meta > span {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .composer-tool {
    padding: 6px 8px;
  }

  .composer-meta {
    gap: 7px;
  }

  .composer-meta > span {
    font-size: 11.5px;
  }
}

/* Front polish v53: scrollbars internas padronizadas em qualquer viewport.
   Largura de tela nao representa capacidade de toque: limitar este token a
   641px fazia o Chrome desktop voltar para a barra nativa ao estreitar. */
.chat-scroll,
.history-list,
.settings-nav,
.settings-content,
.modal-panel,
.plans-panel-scroll,
.root-console-scroll,
.root-users,
.root-region-list,
.root-output,
.root-op-section--scroll .root-op-buttons,
.composer-popover,
.region-popover .region-picker-list,
.region-popover .region-picker-grid,
textarea.input {
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,0.46) rgba(184,174,160,0.045);
}

.chat-scroll::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.settings-nav::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.modal-panel::-webkit-scrollbar,
.plans-panel-scroll::-webkit-scrollbar,
.root-console-scroll::-webkit-scrollbar,
.root-users::-webkit-scrollbar,
.root-region-list::-webkit-scrollbar,
.root-output::-webkit-scrollbar,
.root-op-section--scroll .root-op-buttons::-webkit-scrollbar,
.composer-popover::-webkit-scrollbar,
.region-popover .region-picker-list::-webkit-scrollbar,
.region-popover .region-picker-grid::-webkit-scrollbar,
textarea.input::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Remove as setas nativas do Windows/Chromium: elas quebram o trilho dourado
   e fazem a barra parecer encostar ou "saltar" sobre a curva dos paineis. */
.chat-scroll::-webkit-scrollbar-button,
.history-list::-webkit-scrollbar-button,
.settings-nav::-webkit-scrollbar-button,
.settings-content::-webkit-scrollbar-button,
.modal-panel::-webkit-scrollbar-button,
.plans-panel-scroll::-webkit-scrollbar-button,
.root-console-scroll::-webkit-scrollbar-button,
.root-users::-webkit-scrollbar-button,
.root-region-list::-webkit-scrollbar-button,
.root-output::-webkit-scrollbar-button,
.root-op-section--scroll .root-op-buttons::-webkit-scrollbar-button,
.composer-popover::-webkit-scrollbar-button,
.region-popover .region-picker-list::-webkit-scrollbar-button,
.region-popover .region-picker-grid::-webkit-scrollbar-button,
textarea.input::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* O modal e o navegador compartilham o mesmo elemento rolavel. O recuo no
   proprio trilho evita que a barra atravesse os cantos arredondados. */
.modal-panel::-webkit-scrollbar-track {
  margin-block: 18px;
}

@media (min-width: 641px) {
  .composer textarea.is-scrollable {
    scrollbar-width: thin;
    scrollbar-color: rgba(184,174,160,0.46) rgba(184,174,160,0.045);
  }

  .composer textarea.is-scrollable::-webkit-scrollbar {
    width: 6px;
  }
}

.chat-scroll::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.settings-nav::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.modal-panel::-webkit-scrollbar-track,
.plans-panel-scroll::-webkit-scrollbar-track,
.root-console-scroll::-webkit-scrollbar-track,
.root-users::-webkit-scrollbar-track,
.root-region-list::-webkit-scrollbar-track,
.root-output::-webkit-scrollbar-track,
.root-op-section--scroll .root-op-buttons::-webkit-scrollbar-track,
.composer-popover::-webkit-scrollbar-track,
.region-popover .region-picker-list::-webkit-scrollbar-track,
.region-popover .region-picker-grid::-webkit-scrollbar-track,
textarea.input::-webkit-scrollbar-track,
.composer textarea.is-scrollable::-webkit-scrollbar-track {
  background: rgba(184,174,160,0.045);
  border-radius: 999px;
}

.chat-scroll::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.settings-nav::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.modal-panel::-webkit-scrollbar-thumb,
.plans-panel-scroll::-webkit-scrollbar-thumb,
.root-console-scroll::-webkit-scrollbar-thumb,
.root-users::-webkit-scrollbar-thumb,
.root-region-list::-webkit-scrollbar-thumb,
.root-output::-webkit-scrollbar-thumb,
.root-op-section--scroll .root-op-buttons::-webkit-scrollbar-thumb,
.composer-popover::-webkit-scrollbar-thumb,
.region-popover .region-picker-list::-webkit-scrollbar-thumb,
.region-popover .region-picker-grid::-webkit-scrollbar-thumb,
textarea.input::-webkit-scrollbar-thumb,
.composer textarea.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,0.46);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.chat-scroll::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.settings-nav::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover,
.modal-panel::-webkit-scrollbar-thumb:hover,
.plans-panel-scroll::-webkit-scrollbar-thumb:hover,
.root-console-scroll::-webkit-scrollbar-thumb:hover,
.root-users::-webkit-scrollbar-thumb:hover,
.root-region-list::-webkit-scrollbar-thumb:hover,
.root-output::-webkit-scrollbar-thumb:hover,
.root-op-section--scroll .root-op-buttons::-webkit-scrollbar-thumb:hover,
.composer-popover::-webkit-scrollbar-thumb:hover,
.region-popover .region-picker-list::-webkit-scrollbar-thumb:hover,
.region-popover .region-picker-grid::-webkit-scrollbar-thumb:hover,
textarea.input::-webkit-scrollbar-thumb:hover,
.composer textarea.is-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(184,174,160,0.64);
}

/* Ajuste: hover da sigla de região na barra do orçamento */
.composer-meta .composer-tool--region [data-region-label] {
  color: #E3DACA !important;
}

.composer-tool--region,
.composer-tool--region.is-static-region {
  color: #E3DACA;
  border-color: rgba(184,174,160,0.30);
  background: rgba(184,174,160,0.10);
}

.composer-meta .composer-tool--region:hover [data-region-label],
.composer-meta .composer-tool--region:focus-visible [data-region-label],
.composer-meta .composer-tool--region[aria-expanded="true"] [data-region-label] {
  color: var(--accent) !important;
}
/* ============================================================
   Hotfix v61: trava as linhas do grid do workspace no MOBILE.
   Causa do bug: .maintenance-banner usa display:none quando
   oculto. No grid auto-placement isso desloca os itens: o
   .chat-scroll caía numa linha "auto" (esticava e ocupava todo
   o espaço) e o .composer caía na linha minmax(0,1fr) (colapsava
   para 0px), sobrepondo as mensagens. O hotfix v39 já fixava
   isso no desktop (min-width:901px); aqui espelhamos no mobile.
   ============================================================ */
@media (max-width: 900px) {
  .workspace > .topbar { grid-row: 1; }
  .workspace > .maintenance-banner { grid-row: 2; }
  .workspace > .chat-scroll { grid-row: 3; min-height: 0; }
  .workspace > .composer { grid-row: 4; }
}

/* Composer beta de voz: texto na primeira linha; ferramentas à esquerda e
   microfone + envio à direita na segunda, sem alterar o campo de orçamento. */
.composer,
.app-shell.is-empty-workspace .composer {
  --composer-edge: clamp(28px, 4vw, 44px);
  --composer-radius: clamp(16px, 1.8vw, 18px);
  --composer-control: clamp(30px, 3vw, 32px);
  --composer-action-gap: clamp(6px, .9vw, 8px);
  --composer-gap-x: clamp(10px, 1.6vw, 14px);
  --composer-gap-y: clamp(7px, 1vw, 8px);
  --composer-pad-top: clamp(11px, 1.4vw, 13px);
  --composer-pad-right: clamp(18px, 2vw, 20px);
  --composer-pad-bottom: clamp(11px, 1.4vw, 13px);
  --composer-pad-left: clamp(18px, 2vw, 20px);
  width: min(var(--conversation-width, 720px), calc(100% - var(--composer-edge))) !important;
  min-height: clamp(106px, 10vw, 114px) !important;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "input input"
    "meta submit" !important;
  grid-template-rows: minmax(44px, auto) var(--composer-control) !important;
  align-items: start !important;
  column-gap: var(--composer-gap-x) !important;
  row-gap: var(--composer-gap-y) !important;
  padding:
    var(--composer-pad-top)
    var(--composer-pad-right)
    var(--composer-pad-bottom)
    var(--composer-pad-left) !important;
  border-radius: var(--composer-radius) !important;
}

.composer textarea,
.app-shell.is-empty-workspace .composer textarea {
  min-height: clamp(46px, 6dvh, 54px) !important;
  max-height: min(300px, 42dvh) !important;
  align-self: start !important;
  padding: 10px 0 8px !important;
  border-radius: 10px !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
}

.composer textarea:focus,
.composer textarea:focus-visible,
.composer textarea:not(:placeholder-shown),
.app-shell.is-empty-workspace .composer textarea:focus,
.app-shell.is-empty-workspace .composer textarea:focus-visible,
.app-shell.is-empty-workspace .composer textarea:not(:placeholder-shown) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.composer-meta,
.app-shell.is-empty-workspace .composer-meta {
  grid-area: meta !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(7px, 1.2vw, 12px) !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.composer-tools {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(5px, 1vw, 7px) !important;
  flex-wrap: wrap !important;
}
.composer-quick-actions {
  display: flex !important;
  align-items: center;
  gap: clamp(5px, 1vw, 7px) !important;
  flex-wrap: wrap !important;
}
.composer-quick-actions:empty {
  display: none !important;
}

.composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--composer-control);
  padding: 5px clamp(8px, 1.1vw, 11px) !important;
  font-size: clamp(11.5px, .9vw, 12px) !important;
}

@media (max-width: 520px) {
  .composer,
  .app-shell.is-empty-workspace .composer {
    grid-template-rows: minmax(44px, auto) auto !important;
  }
  .composer-meta,
  .app-shell.is-empty-workspace .composer-meta {
    align-items: flex-end !important;
  }
  .composer-tools {
    align-items: flex-end !important;
  }
  .composer-quick-actions {
    flex: 1 1 100%;
  }
  .composer-quick {
    flex: 1 1 auto;
  }
}

.composer-meta > span {
  display: none !important;
}

.composer-submit-actions {
  grid-area: submit !important;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--composer-action-gap);
  align-self: center;
  justify-self: end;
}

.send-btn {
  grid-area: auto !important;
  width: var(--composer-control) !important;
  height: var(--composer-control) !important;
  position: relative !important;
  align-self: center !important;
  justify-self: center !important;
  margin-top: 0 !important;
  border-radius: 10px !important;
  transition: background 150ms ease, opacity 150ms ease !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.send-btn:focus-visible {
  transform: none !important;
  box-shadow: 0 0 0 3px var(--focus-soft) !important;
  background: var(--action-primary-hover) !important;
}

@media (hover: hover) and (pointer: fine) {
  .send-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--action-primary-hover) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .send-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--action-primary) !important;
  }
}

.send-btn:active {
  transform: none !important;
  box-shadow: none !important;
  background: var(--action-primary-hover) !important;
}

.send-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.send-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
}

.voice-btn {
  position: relative;
  flex: 0 0 auto;
  width: var(--composer-control);
  height: var(--composer-control);
  border: 1px solid rgba(184,174,160,0.28);
  border-radius: 10px;
  background: rgba(184,174,160,0.06);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.voice-btn:hover,
.voice-btn:focus-visible {
  border-color: var(--border-strong);
  background: rgba(184,174,160,0.11);
  color: var(--accent);
  outline: none;
}

.voice-btn:disabled {
  opacity: .5;
  cursor: default;
}

.voice-btn.is-listening {
  border-color: var(--accent);
  background: rgba(184,174,160,0.15);
  color: var(--accent);
}

.voice-btn.is-processing {
  border-color: rgba(184,174,160,0.5);
  background: rgba(184,174,160,0.1);
  color: var(--accent);
}

.voice-btn.is-processing .voice-icon--microphone {
  animation: voice-processing-pulse 1s ease-in-out infinite alternate;
}

.voice-btn.is-listening::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(184,174,160,0.58);
  border-radius: 13px;
  pointer-events: none;
  animation: voice-listening-pulse 1.4s ease-out infinite;
}

.voice-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-icon--stop {
  display: none;
  fill: currentColor;
  stroke: none;
}

.voice-btn.is-listening .voice-icon--microphone { display: none; }
.voice-btn.is-listening .voice-icon--stop { display: block; }

@keyframes voice-listening-pulse {
  0% { opacity: .82; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.12); }
}

@keyframes voice-processing-pulse {
  from { opacity: .45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-btn.is-listening::before,
  .voice-btn.is-processing .voice-icon--microphone { animation: none; }
}

@media (max-width: 640px) {
  .composer,
  .app-shell.is-empty-workspace .composer {
    --composer-radius: 16px;
    /* Alvo visual compacto com área de toque próxima dos 44 px recomendados. */
    --composer-control: 40px;
  }

  .composer textarea,
  .app-shell.is-empty-workspace .composer textarea {
    min-height: 52px !important;
    max-height: min(230px, 36dvh) !important;
  }

  .composer-tool {
    min-height: var(--composer-control);
    padding: 5px 7px !important;
    font-size: 11.5px;
  }
}

@media (max-width: 900px) {
  .workspace > .composer,
  .app-shell.is-empty-workspace .composer {
    margin-bottom: calc(14px + var(--safe-bottom)) !important;
  }
}

@media (display-mode: standalone) and (max-width: 900px) {
  .workspace > .composer,
  .app-shell.is-empty-workspace .composer {
    margin-bottom: calc(18px + var(--safe-bottom)) !important;
  }
}

/* Hotfix v62: confina a lista do seletor de regiao sem cortar a seta do balao. */
.region-popover {
  position: relative !important;
  max-height: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.region-popover::before {
  z-index: 0 !important;
}

.region-popover .region-picker-list,
.region-popover .region-picker-grid {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-height: 168px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 9px !important;
  contain: paint;
  clip-path: inset(0 round 9px);
}

@media (max-width: 900px) {
  .region-popover .region-picker-list,
  .region-popover .region-picker-grid {
    max-height: 124px !important;
  }
}

@media (max-width: 420px) {
  .region-popover .region-picker-list,
  .region-popover .region-picker-grid {
    max-height: 116px !important;
  }
}

/* Polimento: scroll do painel de configurações afastado das curvas externas. */
/* Ajuste estrutural: a area rolavel nasce dentro das curvas do painel. */
.settings-panel {
  position: relative;
  --settings-content-pad: 20px;
  --settings-scroll-edge-inset: clamp(28px, 3.4dvh, 34px);
}

.settings-content {
  margin-block: var(--settings-scroll-edge-inset);
  padding: max(0px, calc(var(--settings-content-pad) - var(--settings-scroll-edge-inset))) var(--settings-content-pad);
}

.settings-panel::before,
.settings-panel::after {
  content: "";
  position: absolute;
  right: 1px;
  z-index: 3;
  width: 12px;
  height: var(--settings-scroll-edge-inset);
  pointer-events: none;
  background: var(--surface);
}

.settings-panel::before {
  top: 1px;
  border-top-right-radius: 26px;
}

.settings-panel::after {
  bottom: 1px;
  border-bottom-right-radius: 26px;
}

@media (max-width: 640px) {
  .settings-panel {
    --settings-content-pad: 14px;
    --settings-scroll-edge-inset: 14px;
  }
}

/* O chat rola normalmente, mas sem gutter visual deslocando o eixo da resposta. */
.chat-scroll {
  scrollbar-width: none;
}

.chat-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Refinamento de produto: robustez visual e microinteracoes sem mudar o fluxo. */
:where(
  .secondary-btn,
  .danger-btn,
  .mini-btn,
  .logout-line,
  .composer-tool,
  .message-action-icon,
  .user-message-actions button,
  .response-chip,
  .settings-tab,
  .legal-row,
  .root-actions button,
  .root-region button,
  .root-op-buttons button,
  .plan-card button,
  .icon-btn,
  .new-chat-btn,
  .sidebar-collapse,
  .side-icon-trigger,
  .plan-shortcut,
  .account-button
) {
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    box-shadow 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .secondary-btn,
    .danger-btn,
    .mini-btn,
    .logout-line,
    .composer-tool,
    .message-action-icon,
    .user-message-actions button,
    .response-chip,
    .settings-tab,
    .legal-row,
    .root-actions button,
    .root-region button,
    .root-op-buttons button,
    .plan-card button,
    .icon-btn,
    .new-chat-btn,
    .sidebar-collapse,
    .side-icon-trigger,
    .plan-shortcut,
    .account-button
  ):hover {
    transform: translateY(-1px);
  }

  .modal-head .icon-btn:hover {
    transform: none;
  }
}

:where(
  .secondary-btn,
  .danger-btn,
  .mini-btn,
  .logout-line,
  .composer-tool,
  .message-action-icon,
  .user-message-actions button,
  .response-chip,
  .settings-tab,
  .legal-row,
  .root-actions button,
  .root-region button,
  .root-op-buttons button,
  .plan-card button,
  .icon-btn,
  .new-chat-btn,
  .sidebar-collapse,
  .side-icon-trigger,
  .plan-shortcut,
  .account-button
):active {
  transform: translateY(0) scale(.985);
}

:where(button, .legal-row):disabled,
:where(button, .legal-row)[aria-disabled="true"],
:where(button, .legal-row).is-loading {
  transform: none !important;
}

.assistant-loading {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(184,174,160,0.16);
  border-radius: 999px;
  background: rgba(28,26,20,0.68);
  padding: 7px 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.16);
}

.settings-loading {
  border-radius: 14px;
}

.nota-card {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(230,217,198,0.018), rgba(230,217,198,0)),
    rgba(28,26,20,0.82);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.nota-title {
  align-items: center;
}

.nota-cell {
  border-radius: 14px;
  background: rgba(20,18,16,0.78);
}

.nota-cell strong {
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.18;
}

.response {
  font-size: 16px;
}

.response-heading {
  font-family: var(--font-brand);
  font-size: 18px;
  letter-spacing: 0;
}

.response-block {
  margin-bottom: 18px;
}

.response-list {
  gap: 8px;
}

.response-item,
.response > .response-item {
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
}

.response-item span:first-child {
  width: 10px;
  opacity: .9;
}

.response-note {
  border-left: 2px solid rgba(184,174,160,0.48);
  padding-left: 12px;
  color: var(--text);
}

.response-chip {
  line-height: 1;
  padding: 0 14px;
  background: rgba(20,18,16,0.36);
}

.message-actions {
  min-height: 40px;
}

.history-empty,
.support-list > .help-text {
  border: 1px solid rgba(184,174,160,0.12);
  border-radius: 14px;
  background: rgba(20,18,16,0.34);
  padding: 12px 13px;
}

.settings-tab {
  min-height: 42px;
}

.settings-tab:focus-visible,
.composer-tool:focus-visible,
.message-action-icon:focus-visible,
.response-chip:focus-visible,
.user-message-actions button:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-soft);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 11px 13px;
  pointer-events: none;
  animation: toastIn 160ms ease both;
}

.toast.is-hiding {
  animation: toastOut 150ms ease both;
}

.toast-mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(184,174,160,0.14);
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
}

.toast-copy {
  min-width: 0;
  line-height: 1.35;
}

.toast.is-error .toast-mark {
  background: rgba(255,140,140,0.16);
  color: #ffdada;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(5px) scale(.985); }
}

@media (max-width: 640px) {
  .nota-card {
    border-radius: 16px;
    padding: 12px;
  }

  .nota-cell {
    border-radius: 13px;
  }

  .response-note {
    padding-left: 10px;
  }

  .toast {
    left: 14px;
    right: 14px;
    bottom: calc(14px + var(--safe-bottom));
    max-width: none;
  }
}

@media (min-width: 1440px) {
  .response {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* Bloco produto: saída do orçamento como decisão comercial pronta. */
.nota-grid {
  grid-template-columns: minmax(220px, 1.28fr) minmax(170px, .92fr) minmax(188px, 1fr);
}

.nota-cell--charge {
  border-color: rgba(184,174,160,0.16);
}

.nota-value {
  letter-spacing: 0;
}

.nota-value--long {
  font-size: clamp(13.5px, .92vw, 15.5px) !important;
}

.response-heading--soft {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
}

.response-command-group {
  display: grid;
  gap: 9px;
  margin: 14px 0 20px;
}

.response-command-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.response-command-group .response-chip-row {
  margin: 0;
}

.budget-actions {
  padding-top: 10px;
  border-top: 1px solid rgba(184,174,160,0.10);
}

.inline-message-editor {
  border-radius: 18px;
}

.inline-message-editor-actions .mini-btn {
  border-color: var(--border-strong);
  color: var(--accent);
  font-weight: 700;
}

/* Base de cobrança — hierarquia de produto pago (valor recomendado em foco). */
.nota-tag {
  align-self: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(184,174,160,0.12);
  border: 1px solid rgba(184,174,160,0.30);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.nota-cell--charge {
  background: rgba(184,174,160,0.10);
  border-color: rgba(184,174,160,0.30);
}
.nota-cell--charge strong { font-size: clamp(18px, 1.3vw, 22px); }
.nota-repasse {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20,18,16,0.6);
  border: 1px solid rgba(184,174,160,0.10);
  font-size: 13px;
  color: var(--muted);
}
.nota-repasse em { font-style: normal; opacity: 0.75; font-size: 11px; }
.nota-repasse strong {
  color: var(--text);
  font-family: var(--font-brand);
  white-space: nowrap;
}
.nota-confianca {
  margin: 11px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* "Copiar proposta" — ação principal de campo, sempre visível e clicável. */
.budget-proposal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #141210;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 160ms ease, transform 60ms ease;
}
.budget-proposal-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.budget-proposal-btn:hover { opacity: 0.9; }
.budget-proposal-btn:active { transform: translateY(1px); }
.budget-proposal-btn.is-done {
  background: rgba(184,174,160,0.16);
  color: var(--accent);
}

/* "Esse orçamento ajudou?" — feedback do orçamento, alimenta o painel root. */
.budget-feedback {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.feedback-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(184,174,160,0.10);
}
.feedback-btn--down.is-active {
  border-color: #e0876f;
  color: #e0876f;
  background: rgba(224,135,111,0.10);
}
.feedback-btn:disabled { cursor: default; }
.feedback-btn:disabled:not(.is-active) { opacity: 0.38; }

@media (max-width: 760px) {
  .nota-grid {
    grid-template-columns: 1fr;
  }

  .nota-value--long {
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  .budget-proposal-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* ═══════════════════ Operação Duas Faces (proposta × privado) ═══════════════
   Fase 1: escopo colapsado + base de cobrança herói.
   Fase 2: banda de repasse "Só você vê".
   Fase 3: botões das duas faces.
   Fase 4: backdrop do dialog, stagger, contraste e focus. */

/* 1) Escopo enviado: o ouro vira acento — nunca superfície dominante. */
.user-bubble {
  background: rgba(36,33,25,0.94);
  color: var(--text);
  border: 1px solid rgba(184,174,160,0.26);
  border-left: 3px solid var(--accent);
}

.scope-card {
  max-width: min(680px, 84%);
  border: 1px solid rgba(184,174,160,0.26);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: rgba(28,26,20,0.92);
  overflow: hidden;
}

.scope-card .user-bubble {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scope-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(184,174,160,0.08);
  border: 0;
  border-bottom: 1px solid rgba(184,174,160,0.14);
  color: var(--accent);
  font-family: var(--font-brand);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}

.scope-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.scope-card:not(.is-collapsed) .scope-toggle svg { transform: rotate(180deg); }

.scope-body {
  position: relative;
  max-height: 2400px;
  overflow: hidden;
  transition: max-height 200ms ease;
}

.scope-card.is-collapsed .scope-body { max-height: 74px; }

.scope-card.is-collapsed .scope-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34px;
  background: linear-gradient(180deg, rgba(28,26,20,0), rgba(28,26,20,0.96));
  pointer-events: none;
}

@media (max-width: 760px) {
  .scope-card { max-width: 92%; }
}

/* 2) Base de cobrança — herói da resposta. */
.nota-grid--hero {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "charge min"
    "charge prazo";
}

.nota-cell--hero {
  grid-area: charge;
  padding: 18px 16px;
  border-color: rgba(184,174,160,0.34);
  background:
    linear-gradient(180deg, rgba(184,174,160,0.10), rgba(184,174,160,0.03)),
    rgba(20,18,16,0.78);
}

.nota-cell--hero span {
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nota-cell--min { grid-area: min; }
.nota-cell--prazo { grid-area: prazo; }

.nota-value--hero {
  font-size: clamp(24px, 2.1vw, 32px) !important;
  color: var(--accent) !important;
}

.nota-value--hero.nota-value--long {
  font-size: clamp(17px, 1.5vw, 21px) !important;
}

.nota-private-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nota-private-label svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: .9;
}

.nota-private-badge {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(184,174,160,0.35);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(184,174,160,0.08);
}

@media (max-width: 760px) {
  .nota-grid--hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "charge charge"
      "min prazo";
  }

  .nota-value--hero { font-size: 26px !important; }
  .nota-value--hero.nota-value--long { font-size: clamp(16px, 5vw, 20px) !important; }
}

@media (max-width: 420px) {
  .nota-grid--hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "charge"
      "min"
      "prazo";
  }
}

/* 3) Banda de repasse — "Só você vê" (referência interna, não empilha). */
.repasse-band {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid rgba(184,174,160,0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(184,174,160,0.05), rgba(184,174,160,0.012)),
    rgba(22,20,16,0.92);
}

.repasse-band-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--accent);
}

.repasse-band-head strong {
  font-family: var(--font-brand);
  font-size: 14px;
}

.repasse-lock {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(184,174,160,0.12);
}

.repasse-lock svg { width: 13px; height: 13px; }

.repasse-band-tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
  text-align: right;
}

.repasse-title {
  margin: 2px 0 10px;
  color: var(--text);
  font-family: var(--font-brand);
  font-size: 15px;
}

.repasse-table {
  display: grid;
  gap: 4px;
}

.repasse-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, .62fr) minmax(0, 1.15fr) minmax(0, 1.05fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 10px;
}

.repasse-row:nth-child(even) { background: rgba(20,18,16,0.55); }

.repasse-row--head {
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.repasse-row [role="cell"] {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  color: var(--text);
}

.repasse-num { font-family: var(--font-brand); }

.repasse-foot {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.repasse-total,
.repasse-margin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(184,174,160,0.18);
  border-radius: 12px;
  background: rgba(20,18,16,0.6);
}

.repasse-total span,
.repasse-margin span {
  color: var(--muted);
  font-size: 12.5px;
}

.repasse-total strong,
.repasse-margin strong {
  color: var(--text);
  font-family: var(--font-brand);
  font-size: 15px;
}

.repasse-margin em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .repasse-row--head { display: none; }

  .repasse-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(184,174,160,0.10);
    background: rgba(20,18,16,0.5);
  }

  .repasse-row:nth-child(even) { background: rgba(20,18,16,0.5); }

  .repasse-row [role="cell"]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .repasse-band-head { flex-wrap: wrap; }
  .repasse-band-tag { margin-left: 0; flex-basis: 100%; text-align: left; }
}

/* 4) Duas faces — botões de cópia. */
.copy-face-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 160ms ease, transform 60ms ease;
}

.copy-face-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.copy-face-btn--client {
  background: var(--accent);
  border-color: var(--accent);
  color: #141210;
  font-weight: 700;
}

.copy-face-btn--client:hover { opacity: .9; }

.copy-face-btn--internal {
  border-color: rgba(184,174,160,0.30);
  background: rgba(184,174,160,0.06);
  color: var(--muted);
}

.copy-face-btn--internal:hover {
  color: var(--accent);
  border-color: var(--border-strong);
}

.copy-face-btn:active { transform: translateY(1px); }

.copy-face-btn.is-done {
  background: rgba(184,174,160,0.14);
  border-color: rgba(184,174,160,0.35);
  color: var(--accent);
}

@media (max-width: 640px) {
  .copy-face-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* 5) Backdrop do dialog — overlay sólido, superfície elevada com borda. */
.app-dialog { background: rgba(14,12,8,0.85); }

.app-dialog-panel {
  border: 1px solid rgba(184,174,160,0.30);
  box-shadow: 0 30px 120px rgba(0,0,0,0.72);
}

/* 6) Entrada das seções da resposta — stagger sutil (reduced-motion já é
   respeitado pelo bloco global @media (prefers-reduced-motion)). */
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-row.assistant .assistant-body > * { animation: sectionIn 150ms ease both; }
.message-row.assistant .assistant-body > *:nth-child(2) { animation-delay: 60ms; }
.message-row.assistant .assistant-body > *:nth-child(3) { animation-delay: 120ms; }
.message-row.assistant .assistant-body > *:nth-child(n+4) { animation-delay: 170ms; }

/* 7) Chips do composer — contraste legível; focus states visíveis. */
.composer-tool {
  color: #E3DACA;
  border-color: rgba(184,174,160,0.30);
  background: rgba(184,174,160,0.10);
  border-radius: 9px;
}

/* Região do usuário comum é um selo estático, não um seletor circular. */
.composer-tool--region.is-static-region {
  min-width: 34px;
}

/* Hotfix mobile/loading: as bolinhas do carregamento mantêm o mesmo pulso
   em desktop, mobile, PWA e teclados virtuais. */
.assistant-loading .loading-dots span {
  animation: pulse 1s infinite ease-in-out !important;
  will-change: opacity, transform;
}

.assistant-loading .loading-dots span:nth-child(2) { animation-delay: .15s !important; }
.assistant-loading .loading-dots span:nth-child(3) { animation-delay: .3s !important; }

.settings-tab:focus-visible,
.composer-tool:focus-visible,
.message-action-icon:focus-visible,
.response-chip:focus-visible,
.user-message-actions button:focus-visible,
.scope-toggle:focus-visible,
.copy-face-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-soft);
}

/* 9) Modal de planos — título sem quebra espaçada e respiro da mensagem
   de checkout em relação ao último card (responsivo em todas as larguras). */
.modal-head h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
}

/* O painel externo preserva o raio; a rolagem acontece em uma camada interna.
   Isso mantém o mesmo scrollbar do produto sem depender do recuo de trilho
   que alguns Chromes mobile ignoram. */
.plans-panel {
  padding: 18px 0;
  overflow: hidden;
  transition: width 180ms ease, max-width 180ms ease;
}

.plans-panel.is-root-account {
  width: min(640px, 100%);
}

.plans-panel-scroll {
  max-height: min(722px, calc(100dvh - 74px));
  padding: 2px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .plans-panel-scroll {
    max-height: calc(100dvh - 58px);
  }
}

.plans-panel .plan-grid {
  margin-bottom: 4px;
}

.billing-checkout-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(184, 174, 160, 0.055);
}

.billing-checkout-state[hidden] { display: none; }

.billing-checkout-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.billing-checkout-copy > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.billing-checkout-copy > strong {
  color: var(--text);
  font-size: 16px;
}

.billing-checkout-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.billing-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 12px;
}

.billing-checkout-actions .secondary-btn,
.billing-checkout-actions .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
}

.billing-checkout-actions .text-link {
  color: var(--danger);
}

.billing-root-state {
  display: grid;
  gap: 7px;
  min-height: 148px;
  padding: 22px;
  align-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: rgba(184, 174, 160, 0.055);
}

.plans-panel.is-root-account .billing-root-state {
  min-height: 122px;
  padding: 20px;
}

.billing-root-state[hidden] { display: none; }

.billing-root-state > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.billing-root-state > strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.1;
}

.billing-root-state > p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.plans-panel .modal-message {
  margin-top: 14px;
  padding: 0 2px 6px;
}
.plans-panel .modal-message:empty { display: none; }

.billing-account-email {
  margin: 14px 0 0;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.billing-account-email[hidden] { display: none; }

.billing-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(184, 174, 160, 0.035);
  font-size: 14px;
  line-height: 1.45;
}

.billing-consent-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

.billing-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.billing-consent a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: var(--text);
  text-underline-offset: 3px;
}

.billing-consent input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.subscription-status {
  border-color: var(--border-strong);
}

.subscription-status > strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
}

.subscription-status > p {
  margin-bottom: 0;
}

.usage-topup > strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.usage-topup > p {
  margin: 8px 0 0;
}

.topup-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.topup-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.topup-consent input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.topup-actions {
  align-items: center;
  margin-top: 12px;
}

.topup-actions .text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.subscription-history {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.subscription-history > div {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.subscription-history strong { color: var(--text); font-size: 13px; line-height: 1.35; }
.subscription-history small { color: var(--accent); font-size: 13px; line-height: 1.35; }

.topup-history-item:has(.topup-history-actions) {
  grid-template-columns: minmax(88px, 1fr) auto auto;
  padding: 8px 0;
}

.topup-history-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topup-history-actions .text-link {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
}

.topup-history-actions .text-link:hover {
  border-color: var(--border-strong);
  background: var(--panel);
}

.topup-history-actions .text-link.is-danger {
  color: var(--danger);
  border-color: rgba(229, 138, 126, 0.35);
}

@media (max-width: 520px) {
  .topup-history-item:has(.topup-history-actions) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topup-history-item:has(.topup-history-actions) > small {
    grid-column: 1 / -1;
  }

  .topup-history-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topup-history-actions .text-link {
    justify-content: center;
  }
}

.root-payment-status.is-pagamento_pendente,
.root-payment-status.is-divergente,
.root-payment-status.is-erro {
  color: var(--danger);
  border-color: rgba(229, 138, 126, 0.35);
}

.root-payment-status.is-ativa {
  color: var(--accent);
  border-color: var(--border-strong);
}

/* Quando a frase e o link deixam de caber lado a lado, o conjunto passa para
   duas linhas de forma intencional e o link acompanha o eixo do texto. */
@media (max-width: 840px) {
  .billing-consent {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 8px 12px;
  }
  .billing-consent-choice { align-items: start; }
  .billing-consent a {
    min-height: 46px;
    margin-left: 28px;
  }
}

@media (max-width: 760px) {
  .modal-head h2 {
    font-size: 21px;
    line-height: 1.15;
  }

  .plans-panel .modal-message {
    margin-top: 16px;
    padding-bottom: 10px;
  }

  .modal-head .icon-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }
  .subscription-history > div { grid-template-columns: 1fr auto; }
  .subscription-history small { grid-column: 1 / -1; padding-bottom: 8px; }

  .billing-checkout-state {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .billing-checkout-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* 8) Correções cirúrgicas pós-review. */
/* Sidebar recolhida: a lista de histórico está oculta, então a seção não
   precisa de overflow hidden — o hover (translateY) não corta mais o topo do
   botão e o tooltip lateral deixa de ser clipado. */
.app-shell.sidebar-collapsed .side-section { overflow: visible; }

/* Popover do composer aberto para cima quando falta espaço abaixo
   (classe aplicada por flipComposerPopoverIfNeeded no app.js).
   Mesma âncora do hotfix v40 (bottom: 58px): o balão sai de cima da fileira
   dos controles Limpar/região, com a setinha no botão — nunca flutuando longe.
   Especificidade (0,4,0) para vencer o v40, que também usa !important.
   Só desktop: no mobile o balão já é ancorado nos chips pelas regras atuais. */
@media (min-width: 901px) {
  .app-shell.is-empty-workspace .composer-popovers.composer-popovers--up,
  .app-shell:not(.is-empty-workspace) .composer-popovers.composer-popovers--up {
    top: auto !important;
    bottom: 58px !important;
  }

  /* Setinha acompanha o flip: aponta para baixo, sobre o botão. */
  .app-shell.is-empty-workspace .composer-popovers--up .composer-popover::before {
    top: auto !important;
    bottom: -6px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(184,174,160,.22) !important;
    border-bottom: 1px solid rgba(184,174,160,.22) !important;
  }
}

/* Ajuste final: no seletor compacto de regiao, a rolagem permanece ativa,
   mas a barra visual nao cruza as linhas divisorias das UFs. */
.region-popover .region-picker-list,
.region-popover .region-picker-grid {
  scrollbar-width: none !important;
}

.region-popover .region-picker-list::-webkit-scrollbar,
.region-popover .region-picker-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* Ajuste final dos popovers do composer: balão limpo, sem seta. */
.composer-popover {
  border-color: rgba(184,174,160,0.24) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(34,31,27,0.98), rgba(18,16,14,0.98)) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,246,232,0.03) inset !important;
}

.composer-popovers .composer-popover:not(.region-popover)::before,
.app-shell .composer-popovers .composer-popover:not(.region-popover)::before,
.app-shell.is-empty-workspace .composer-popovers .composer-popover:not(.region-popover)::before,
.app-shell:not(.is-empty-workspace) .composer-popovers .composer-popover:not(.region-popover)::before,
.app-shell.is-empty-workspace .composer-popovers--up .composer-popover:not(.region-popover)::before,
.app-shell:not(.is-empty-workspace) .composer-popovers--up .composer-popover:not(.region-popover)::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

@media (min-width: 901px) {
  .app-shell.is-empty-workspace .composer-popovers.composer-popovers--up,
  .app-shell:not(.is-empty-workspace) .composer-popovers.composer-popovers--up {
    top: auto !important;
    bottom: var(--popover-up-bottom, 48px) !important;
  }
}

@media (max-width: 900px) {
  .composer-popovers,
  .app-shell.is-empty-workspace .composer-popovers,
  .app-shell:not(.is-empty-workspace) .composer-popovers,
  .composer-popovers.composer-popovers--up,
  .app-shell.is-empty-workspace .composer-popovers.composer-popovers--up,
  .app-shell:not(.is-empty-workspace) .composer-popovers.composer-popovers--up {
    top: auto !important;
    bottom: var(--popover-up-bottom, 56px) !important;
  }
}

/* Root polish v54: overrides finais mantidos no fim da cascata para que PWA,
   Chrome e Edge usem exatamente a mesma geometria. */
.root-utility-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.root-advanced-ops { display: contents; }

.root-utility-row .root-op-section--advanced,
.root-utility-row .root-secondary-section {
  min-height: 0;
  padding: 0;
  overflow: clip;
  align-self: start;
}

.root-utility-row .root-op-section--advanced[open],
.root-utility-row .root-secondary-section[open] {
  grid-column: 1 / -1;
}

.root-view .root-utility-row .root-op-section--advanced > summary,
.root-view .root-utility-row .root-secondary-section > summary {
  box-sizing: border-box;
  min-height: 54px;
  margin: 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.root-view .root-utility-row .root-op-section--advanced[open] > summary,
.root-view .root-utility-row .root-secondary-section[open] > summary {
  margin: 0;
}

.root-utility-row .root-op-section--advanced > .root-op-buttons,
.root-utility-row .root-secondary-section > .root-regions {
  margin: 0;
  padding: 12px;
}

.region-dd-list {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(184,174,160,.46) rgba(184,174,160,.045) !important;
}

.region-dd-list::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.region-dd-list::-webkit-scrollbar-thumb {
  background: rgba(184,174,160,.46) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: content-box !important;
}

@media (max-width: 760px) {
  .root-utility-row { grid-template-columns: 1fr; }
}

.verify-existing-account {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(184,174,160,.28);
  border-radius: 13px;
  background: rgba(184,174,160,.075);
}

.verify-existing-account strong {
  color: var(--accent);
  font-size: 13px;
}

.verify-existing-account span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* O seletor regional Root abre como caixa direta sob o botao, sem ponteiro. */
.composer-popovers .region-popover::before,
.app-shell .composer-popovers .region-popover::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Utilitarios Root seguem o mesmo botao operacional de "Mais acoes":
   compactos, branco quente e painel separado quando abertos. */
.root-utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.root-advanced-ops {
  display: contents;
}

.root-utility-row .root-op-section--advanced,
.root-utility-row .root-secondary-section {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.root-view .root-utility-row .root-op-section--advanced > summary,
.root-view .root-utility-row .root-secondary-section > summary {
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(184,174,160,.06);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.root-view .root-utility-row .root-op-section--advanced > summary::after,
.root-view .root-utility-row .root-secondary-section > summary::after {
  width: 7px;
  height: 7px;
  margin-left: 9px;
  color: var(--muted);
  border-width: 0 2px 2px 0;
}

@media (hover: hover) and (pointer: fine) {
  .root-view .root-utility-row summary:hover {
    color: var(--accent);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
}

.root-view .root-utility-row details[open] {
  flex: 1 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}

.root-view .root-utility-row details[open] > summary {
  grid-column: 1;
  grid-row: 1;
  color: var(--accent);
  border-color: var(--border-strong);
  background: rgba(184,174,160,.10);
}

.root-view .root-utility-row details[open] > .root-op-buttons,
.root-view .root-utility-row details[open] > .root-regions {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(20,18,16,.38);
  animation: rootDisclosureIn 170ms cubic-bezier(.2,.8,.2,1) both;
}

@media (max-width: 640px) {
  .root-view .root-utility-row .root-op-section--advanced > summary,
  .root-view .root-utility-row .root-secondary-section > summary {
    min-height: 44px;
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* Barra unica de utilitarios Root: uma aba ativa e um painel compartilhado. */
.root-utility {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.root-utility-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.root-utility-tabs > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(230,217,198,.025);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.root-utility-tabs > button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  transition: transform 160ms ease, color 160ms ease;
}

.root-utility-tabs > button.is-active {
  color: var(--accent);
  border-color: var(--border-strong);
  background: rgba(184,174,160,.10);
}

.root-utility-tabs > button.is-active svg {
  color: var(--accent);
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .root-utility-tabs > button:hover {
    color: var(--accent);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
}

.root-utility-tabs > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.root-utility-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(20,18,16,.38);
  overflow: hidden;
}

.root-utility-panel.is-entering {
  animation: rootDisclosureIn 170ms cubic-bezier(.2,.8,.2,1) both;
}

.root-utility-panel > [data-root-utility-view]:not([hidden]) {
  display: block;
  min-width: 0;
}

.root-utility-panel .root-op-buttons {
  max-height: clamp(150px, 28dvh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Sistema de densidade do Root: controles compactos e consistentes. Selos e
   estados continuam redondos porque informam situacao, nao executam acao. */
.root-view :is(
  .root-toolbar button,
  .root-recovery-actions button,
  .root-actions button,
  .root-op-buttons button,
  .root-region button,
  .support-ticket-actions button,
  .root-more-toggle
) {
  border-radius: 10px;
}

.root-view :is(
  .root-toolbar button,
  .root-recovery-actions button,
  .root-actions button,
  .root-more-toggle
) {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.2;
}

.root-view :is(.root-op-buttons button, .root-region button, .support-ticket-actions button) {
  min-height: 44px;
  padding: 7px 10px;
  font-size: 12px;
}

/* Hover do Root permanece dentro da geometria do controle. Alguns grupos usam
   overflow para rolagem; elevar o botao em 1px fazia a borda superior ser
   recortada pelo proprio container. Cor e borda continuam dando o feedback. */
@media (hover: hover) and (pointer: fine) {
  .root-view :is(
    .root-toolbar button,
    .root-recovery-actions button,
    .root-actions button,
    .root-op-buttons button,
    .root-region button,
    .support-ticket-actions button,
    .root-more-toggle,
    .root-utility-tabs > button
  ):hover {
    transform: none;
  }
}

.root-view :is(.root-stat, .root-user, .root-recovery) {
  border-radius: 16px;
}

@media (max-width: 520px) {
  .root-utility-tabs {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr) minmax(0, .94fr);
  }

  .root-utility-tabs > button {
    min-height: 44px;
    min-width: 0;
    padding-inline: 9px;
    gap: 5px;
    font-size: 12px;
  }

  .root-utility-tabs > button svg {
    width: 13px;
    height: 13px;
  }

  .root-utility-panel {
    padding: 10px;
    border-radius: 12px;
  }
}

/* Root operations v55: hierarquia tipografica, controles e estados usam a
   mesma identidade em todas as larguras; media queries apenas reorganizam. */
.topbar {
  border-bottom: 0;
}

.settings-content > .modal-head {
  margin-bottom: clamp(10px, 1.15vw, 13px);
}

/* O título da tela continua primário, mas sem disputar visualmente com o
   conteúdo. No menor viewport mantém 2 px de hierarquia sobre "Painel Root". */
.settings-content > .modal-head h2 {
  font-size: clamp(23px, 2.4vw, 30px);
}

.settings-view.root-view.is-active {
  gap: clamp(10px, 1.15vw, 13px);
}

.root-toolbar h3 {
  margin: 0 0 2px;
  font-family: var(--font-brand);
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.root-toolbar .help-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
}

.root-workspace-head h4 {
  font-family: var(--font-brand);
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.root-stat--action {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.root-stat span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.root-stat strong {
  font-family: var(--font-brand);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 800;
  line-height: 1.05;
}

@media (hover: hover) and (pointer: fine) {
  .root-stat--action:hover {
    border-color: var(--border-strong);
    background: rgba(184,174,160,.085);
  }
}

.root-stat--action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* O quadrado e compacto; o label preserva 44px de alvo para dedo e teclado. */
.root-user-id:has(.root-recovery-check) {
  padding-left: 28px;
}

.root-recovery-check {
  left: -10px;
  top: -10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.root-payment-check {
  min-width: 44px;
  min-height: 44px;
}

.root-recovery-check input,
.root-payment-check input {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid rgba(230,226,215,.45);
  border-radius: 3px;
  background: rgba(20,18,16,.92);
  appearance: none;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.root-recovery-check input:checked,
.root-payment-check input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.root-recovery-check input:checked::after,
.root-payment-check input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #17130a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.root-recovery-check input:focus-visible,
.root-payment-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .root-recovery-check:hover input,
  .root-payment-check:hover input {
    border-color: var(--accent);
  }
}

.root-workspace-intro {
  max-width: 76ch;
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.root-workspace-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 92px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.root-workspace-loading .button-loading-spinner {
  color: var(--accent);
}

.root-payment-next,
.root-operation-status {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(184,174,160,.25);
  border-radius: 10px;
  background: rgba(184,174,160,.055);
}

.root-payment-next strong,
.root-operation-status strong {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
}

.root-payment-next span,
.root-operation-status span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.root-operation-status.is-pending {
  border-color: rgba(255,140,140,.28);
  background: rgba(190,55,55,.055);
}

.root-operation-status {
  width: min(100%, 880px);
}

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

.root-communication-actions button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(184,174,160,.06);
  color: var(--text);
  font: 500 13px/1.2 var(--font-body);
  cursor: pointer;
}

.root-communication-actions span {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.root-communication-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Texto parte sempre do mesmo eixo; a seta ocupa o fim do controle. A regra é
   única para desktop, PWA e mobile — só a grade muda de coluna. */
.root-utility-tabs > button {
  justify-content: flex-start;
}

.root-utility-tabs > button span {
  min-width: 0;
  text-align: left;
}

.root-utility-tabs > button svg {
  margin-left: auto;
}

/* A mesma seta SVG conserva a mesma geometria no desktop, PWA e mobile. */
@media (max-width: 520px) {
  .root-utility-tabs > button svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 340px) {
  .root-utility-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .root-workspace-intro {
    margin-bottom: 12px;
  }

  .root-payment-card header {
    align-items: flex-start;
  }
}

/* Root console v56: a moldura ampla serve aos dados densos, mas cada tipo de
   conteúdo conserva uma largura de leitura própria. A rolagem vertical fica no
   corpo de Configurações; workspaces não criam uma segunda janela apertada. */
.root-output {
  max-height: none;
  overflow: visible;
  padding: clamp(12px, 1.35vw, 16px);
}

.root-console .root-output-close {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 1.35vw, 16px);
  right: clamp(12px, 1.35vw, 16px);
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: fit-content;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(184,174,160,0.055);
  color: var(--muted);
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.root-workspace-back {
  appearance: none;
  -webkit-appearance: none;
  width: fit-content;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--root-radius-control, 10px);
  background: rgba(184,174,160,.055);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.root-workspace-back:hover,
.root-workspace-back:focus-visible {
  color: var(--accent);
  border-color: var(--border-strong);
  background: rgba(184,174,160,.1);
}

.root-output-close:hover,
.root-output-close:focus-visible {
  color: var(--accent);
  border-color: var(--border-strong);
}

.root-output > :not(.root-output-close):first-of-type {
  padding-inline-end: 76px;
}

.root-console .root-output.is-transitioning {
  animation: root-output-enter 170ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes root-output-enter {
  from { opacity: .55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.root-op-buttons button.is-active {
  color: var(--accent);
  border-color: rgba(184,174,160,0.55);
  background: rgba(184,174,160,0.12);
}

.root-output > :is(
  .root-workspace-head,
  .root-workspace-intro,
  .root-payment-toolbar,
  .root-health-card,
  .root-health-metrics,
  .root-communication-actions,
  .root-result-list,
  .root-event-list,
  .root-workspace-empty
) {
  width: min(100%, 880px);
}

.root-output > .root-payment-card {
  width: min(100%, 880px);
}

.root-payment-list,
.root-feedback-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 520px));
  justify-content: start;
  align-items: start;
}

.root-payment-card,
.root-feedback-card {
  width: 100%;
  min-width: 0;
}

.root-support-inbox {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 820px));
  justify-content: start;
  align-items: start;
}

.root-users {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 620px));
  justify-content: start;
  align-items: start;
}

.root-utility-panel .root-op-buttons {
  padding: 3px 7px 8px 3px;
}

.root-payment-next,
.root-payment-blocks,
.root-payment-details,
.root-payment-amounts,
.root-payment-card > .help-text {
  max-width: 76ch;
}

.root-payment-actions--primary {
  margin: 12px 0 4px;
  padding-top: 0;
  border-top: 0;
}

.root-test-cleanup-note {
  display: grid;
  gap: 3px;
  width: min(100%, 880px);
  margin: 0 0 14px;
  border: 1px solid rgba(184,174,160,.28);
  border-radius: var(--root-radius-control, 10px);
  background: rgba(184,174,160,.06);
  padding: 10px 12px;
}

.root-test-cleanup-note strong {
  color: var(--text);
  font-size: 13px;
}

.root-test-cleanup-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .root-output {
    padding: 11px;
  }

  .root-console .root-workspace-head > button {
    align-self: flex-start;
    width: auto;
  }

  .root-payment-list,
  .root-feedback-list,
  .root-support-inbox,
  .root-users {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 440px) {
  .root-payment-bulk,
  .root-payment-actions,
  .root-feedback-actions,
  .support-ticket-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .root-payment-bulk button,
  .root-payment-actions button,
  .root-feedback-actions button,
  .support-ticket-actions button {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .root-console .root-recovery-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .root-console .root-recovery-actions .secondary-btn {
    flex: 0 1 auto;
    width: auto;
  }

  .root-console .root-collection-pagination .secondary-btn {
    align-self: flex-start;
    width: fit-content;
  }
}

.root-console .root-collection-pagination .secondary-btn,
.root-console .support-ticket-actions button {
  min-height: 44px;
}

.root-console .root-console-actions .icon-btn {
  border-color: var(--root-border);
  background: rgba(184,174,160,.055);
}

.root-console .root-payment-card header strong,
.root-console .root-payment-card header small {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 440px) {
  .root-console .root-payment-card header > div {
    flex-basis: 100%;
  }
}

/* Capacidades do Coringa: seletor discreto e contexto operacional real. */
.topbar-context p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.engine-popover {
  max-height: min(360px, 48dvh);
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,.42) transparent;
}
.engine-picker-list {
  display: grid;
  gap: 4px;
}
.engine-picker-list button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 8px;
  color: var(--text);
  text-align: left;
  background: transparent;
}
.engine-picker-list button:hover,
.engine-picker-list button.is-active {
  border-color: rgba(184,174,160,.3);
  background: rgba(184,174,160,.08);
}
.engine-option-copy {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.engine-option-copy strong,
.engine-option-copy small { display: block !important; width: 100%; }
.engine-picker-list strong { font-size: 14px; line-height: 1.25; }
.engine-picker-list small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.engine-option-icon {
  width: 18px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.engine-option-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O + segue a linguagem do Codex: sem chip, sem seta, sem volume visual. */
.composer .composer-tool--engine,
.composer .composer-tool--engine:hover,
.composer .composer-tool--engine[aria-expanded="true"] {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.composer .composer-tool--engine::after {
  display: none !important;
  content: none !important;
}
.engine-plus {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor !important;
  font-size: 0 !important;
  line-height: 0;
}
.engine-plus::before,
.engine-plus::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: currentColor;
}
.engine-plus::before {
  left: 2px;
  top: 8px;
  width: 14px;
  height: 2px;
}
.engine-plus::after {
  left: 8px;
  top: 2px;
  width: 2px;
  height: 14px;
}

.obra-board {
  width: min(var(--conversation-width, 720px), 100%);
  margin: 0 auto 18px;
  border: 1px solid rgba(184,174,160,.18);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(31,28,20,.97), rgba(20,19,16,.98));
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
  padding: 18px;
}
.obra-board[hidden] { display: none !important; }
.obra-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184,174,160,.14);
}
.obra-board-head > div { min-width: 0; }
.obra-board-head span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.obra-board-head h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.obra-create-trigger { flex: 0 0 auto; color: var(--accent); }
.obra-create-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(184,174,160,.2);
  border-radius: 18px;
  background: rgba(184,174,160,.045);
}
.obra-create-panel[hidden] { display: none !important; }
.obra-create-panel .form-message:empty { display: none; }
.obra-create-panel label,
.obra-work-switcher label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.obra-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.obra-accept {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start;
  line-height: 1.45;
}
.obra-accept input { margin: 2px 0 0; accent-color: var(--accent); }
.obra-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 1px;
}
.obra-create-actions button { width: auto; min-height: 40px; }
.obra-work-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}
.obra-work-select-wrap { min-width: 0; }
.obra-work-switcher .input { min-height: 44px; }
.obra-work-tools {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, auto);
  gap: 7px;
}
.obra-work-tools .composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}
.obra-work-tools .composer-tool.is-active { color: var(--accent); background: rgba(184,174,160,.1); }
.obra-work-tools .obra-delete { color: #f0a29a; border-color: rgba(222,98,86,.28); }
.obra-work-tools.is-single-action {
  display: inline-flex;
  justify-self: start;
  width: auto;
  max-width: 100%;
}
.obra-work-tools.is-single-action .composer-tool { width: auto; min-width: 104px; }
.obra-overview { margin-top: 14px; }
.composer.has-work-context,
.app-shell.is-empty-workspace .composer.has-work-context {
  grid-template-areas: "context context" "input input" "meta submit" !important;
  grid-template-rows: auto minmax(44px, auto) var(--composer-control) !important;
}
.composer-context {
  grid-area: context;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.composer-context [data-engine-context] { flex: 0 0 auto; font-weight: 600; }
.composer-context [data-composer-work] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-context [data-composer-work]:not([hidden])::before { content: "·"; margin-right: 8px; }
.obra-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.obra-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(184,174,160,.14);
  border-radius: 12px;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 11px;
}
.obra-summary strong { color: var(--text); font-size: 15px; }
.work-agreement {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(184,174,160,.2);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(184,174,160,.065), rgba(0,0,0,.06));
}
.work-agreement.is-complete { border-color: rgba(82,180,121,.28); }
.agreement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.agreement-head > span { display: grid; gap: 2px; min-width: 0; }
.agreement-head strong { color: var(--text); font-size: 14px; }
.agreement-head small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.agreement-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.agreement-head-actions > button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(184,174,160,.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(184,174,160,.055);
  font: 600 10px/1.2 var(--font-body);
  cursor: pointer;
}
.agreement-head-actions > b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(184,174,160,.12);
  font-size: 10px;
  line-height: 1.2;
}
.work-agreement.is-complete .agreement-head-actions > b {
  color: #8fd5ab;
  background: rgba(79,174,117,.12);
}
.agreement-pending-copy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.agreement-current,
.agreement-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.agreement-current > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(230,217,198,.055);
  border-radius: 10px;
  background: rgba(0,0,0,.09);
}
.agreement-current small { color: var(--muted); font-size: 10px; }
.agreement-current strong { color: var(--text); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.agreement-wide { grid-column: 1 / -1; }
.agreement-editor,
.agreement-history {
  border-top: 1px solid rgba(184,174,160,.12);
  padding-top: 9px;
}
.agreement-editor > summary,
.agreement-history > summary {
  width: fit-content;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.agreement-editor[open] > summary,
.agreement-history[open] > summary { margin-bottom: 10px; }
.agreement-reference {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(184,174,160,.045);
  font-size: 10px;
  line-height: 1.45;
}
.agreement-reference strong { color: var(--text); font-size: 11px; }
.agreement-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.agreement-form .input { min-height: 40px; font-size: 12px; }
.agreement-form textarea.input { resize: none; max-height: min(156px, 24dvh); overflow-y: hidden; }
.agreement-days { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.agreement-days small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.agreement-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.agreement-actions .primary-btn { width: auto; min-height: 40px; padding: 9px 13px; font-size: 11px; }
.agreement-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agreement-history li { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); gap: 10px; }
.agreement-history li > span { display: grid; align-content: start; gap: 1px; }
.agreement-history li small { color: var(--muted); font-size: 10px; }
.agreement-history li p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.obra-items { display: grid; gap: 7px; margin-top: 12px; }
.obra-item-card {
  overflow: hidden;
  border: 1px solid rgba(184,174,160,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.08);
}
.obra-item-card.has-open-select,
.scope-change-card.has-open-select {
  position: relative;
  z-index: 8;
  overflow: visible;
}
.obra-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(0,0,0,.08);
  text-align: left;
}
.obra-item:hover { border-color: rgba(184,174,160,.38); background: rgba(184,174,160,.055); }
.obra-item > span { min-width: 0; display: grid; gap: 2px; }
.obra-item strong { overflow-wrap: anywhere; }
.obra-item small { color: var(--muted); font-size: 11px; }
.obra-item-balance { flex: 0 0 auto; text-align: right; }
.obra-item-balance strong { color: var(--accent); font-size: 12px; }
.item-plan {
  display: grid;
  gap: 9px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(184,174,160,.1);
}
.item-plan > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.item-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-plan-head strong { color: var(--text); font-size: 11px; }
.item-plan-head b { color: var(--accent); font-size: 9px; text-transform: uppercase; }
.item-plan.is-complete .item-plan-head b { color: #8fd5ab; }
.item-plan-current,
.item-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.item-plan-current > span { display: grid; gap: 2px; min-width: 0; }
.item-plan-current small { color: var(--muted); font-size: 9px; }
.item-plan-current strong { color: var(--text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.item-plan-wide { grid-column: 1 / -1; }
.item-plan-editor { border-top: 1px solid rgba(184,174,160,.09); padding-top: 8px; }
.item-plan-editor > summary,
.item-plan-history > summary { width: fit-content; color: var(--accent); font-size: 10px; font-weight: 700; cursor: pointer; }
.item-plan-editor[open] > summary { margin-bottom: 9px; }
.item-plan-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.item-plan-form .input { min-height: 40px; font-size: 12px; }
.item-plan-form textarea.input { resize: none; max-height: min(156px, 24dvh); overflow-y: hidden; }
.item-plan-guidance { margin: 0; padding: 8px 9px; border-radius: 9px; color: var(--muted); background: rgba(184,174,160,.045); font-size: 10px; line-height: 1.45; }
.item-plan-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.item-plan-actions .secondary-btn { width: auto; min-height: 40px; padding: 9px 13px; font-size: 11px; }
.item-plan-history { border-top: 1px solid rgba(184,174,160,.09); padding-top: 8px; }
.item-plan-history[open] > summary { margin-bottom: 8px; }
.item-plan-history ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.item-plan-history li { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 9px; }
.item-plan-history li > span { display: grid; align-content: start; gap: 1px; }
.item-plan-history li small { color: var(--muted); font-size: 9px; }
.item-plan-history li p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.work-orders {
  display: grid;
  gap: 9px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(184,174,160,.1);
  background: rgba(184,174,160,.018);
}
.work-orders-head,
.work-order-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.work-orders-head > span,
.work-order-title > span { display: grid; gap: 2px; min-width: 0; }
.work-orders-head strong,
.work-order-title strong { color: var(--text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.work-orders-head small,
.work-order-title small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.work-orders-head > b {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(184,174,160,.09);
  font-size: 9px;
  text-align: center;
}
.work-order-empty { margin: 0; color: var(--muted); font-size: 10px; }
.work-order-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(184,174,160,.14);
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}
.work-order-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.work-order-title > b {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(184,174,160,.09);
  font-size: 9px;
  line-height: 1.2;
}
.work-order-title > b[data-status="COMPLETED"] { color: #8fd5ab; background: rgba(79,174,117,.12); }
.work-order-title > b[data-status="DISPUTED"] { color: #efbf83; background: rgba(226,142,47,.11); }
.work-order-title > b[data-status="CANCELLED"],
.work-order-title > b[data-status="TERMINATED"] { color: var(--muted); background: rgba(230,217,198,.05); }
.work-order-facts { display: grid; grid-template-columns: minmax(110px,.55fr) minmax(0,1fr); gap: 8px; }
.work-order-facts > span { display: grid; gap: 2px; min-width: 0; }
.work-order-facts small { color: var(--muted); font-size: 9px; }
.work-order-facts strong { color: var(--text); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.work-order-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.work-order-actions .primary-btn,
.work-order-actions .secondary-btn { width: auto; min-height: 34px; padding: 7px 10px; font-size: 10px; }
.work-order-actions .text-link { min-height: 32px; padding: 6px 4px; font-size: 10px; }
.work-order-history,
.work-order-reviews { border-top: 1px solid rgba(184,174,160,.08); padding-top: 7px; }
.work-order-history > summary,
.work-order-reviews > summary { width: fit-content; color: var(--accent); font-size: 9px; font-weight: 700; cursor: pointer; }
.work-order-history[open] > summary,
.work-order-reviews[open] > summary { margin-bottom: 7px; }
.work-order-history ol,
.work-order-reviews ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.work-order-history li,
.work-order-reviews li { display: grid; grid-template-columns: minmax(104px,auto) minmax(0,1fr); gap: 8px; }
.work-order-history li > span,
.work-order-reviews li > span { display: grid; align-content: start; gap: 1px; }
.work-order-history li strong,
.work-order-reviews li strong { color: var(--text); font-size: 9px; }
.work-order-history li small,
.work-order-reviews li small { color: var(--muted); font-size: 8px; }
.work-order-history li p,
.work-order-reviews li p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.work-order-reviews li {
  padding: 8px;
  border: 1px solid rgba(184,174,160,.09);
  border-radius: 9px;
  background: rgba(184,174,160,.025);
}
.work-order-editor,
.work-order-review-editor { border-top: 1px solid rgba(184,174,160,.09); padding-top: 8px; }
.work-order-editor > summary,
.work-order-review-editor > summary { width: fit-content; color: var(--accent); font-size: 10px; font-weight: 700; cursor: pointer; }
.work-order-editor[open] > summary,
.work-order-review-editor[open] > summary { margin-bottom: 8px; }
.work-order-guidance {
  margin: 0 0 9px;
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(184,174,160,.045);
  font-size: 10px;
  line-height: 1.45;
}
.work-order-form,
.work-order-review-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.work-order-form label,
.work-order-review-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.work-order-form .input,
.work-order-review-form .input { min-height: 40px; font-size: 12px; }
.work-order-form textarea.input,
.work-order-review-form textarea.input { resize: none; max-height: min(156px,24dvh); overflow-y: hidden; }
.work-order-wide { grid-column: 1 / -1; }
.work-order-quantity { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
.work-order-quantity > b { min-width: 48px; color: var(--muted); font-size: 10px; text-align: left; }
.work-order-form-actions,
.work-order-review-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.work-order-form-actions .primary-btn,
.work-order-review-actions .primary-btn { width: auto; min-height: 40px; padding: 9px 13px; font-size: 11px; }
.work-closeout {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(184,174,160,.18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(184,174,160,.045), rgba(0,0,0,.08));
}
.work-closeout.is-closed { border-color: rgba(79,174,117,.3); background: rgba(79,174,117,.035); }
.work-closeout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-closeout-head > span { min-width: 0; display: grid; gap: 2px; }
.work-closeout-head strong { color: var(--text); font-size: 13.5px; }
.work-closeout-head small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.work-closeout-head button { flex: 0 0 auto; min-height: 38px; width: auto; padding: 8px 12px; font-size: 11px; }
.work-closeout-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.work-closeout-facts > span,
.closeout-delivery > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(230,217,198,.055);
  border-radius: 10px;
  background: rgba(0,0,0,.1);
}
.work-closeout-facts small,
.closeout-delivery small { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.work-closeout-facts strong,
.closeout-delivery strong { color: var(--text); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.closeout-finance-note,
.closeout-pending { margin: 0; font-size: 11.5px; line-height: 1.5; }
.closeout-finance-note { color: var(--muted); }
.closeout-pending { padding: 8px 9px; border-radius: 9px; color: #efbf83; background: rgba(226,142,47,.055); }

/* Camada 7 — hierarquia de forma. Painéis, cards e controles têm cantos
   progressivamente menores. Cápsulas completas ficam reservadas a estados,
   versões e contadores, nos seletores específicos já existentes. */
.auth-card,
.modal-panel,
.settings-panel,
.app-dialog-panel,
.composer,
.app-shell.is-empty-workspace .composer {
  border-radius: var(--radius-panel) !important;
}

.usage-card,
.account-card,
.settings-card,
.history-item,
.obra-item-card,
.work-agreement,
.work-finance,
.work-closeout,
.obra-lifecycle-history,
.obra-operational-timeline,
.scope-change-card,
.work-order-card {
  border-radius: var(--radius-card) !important;
}

.input,
.primary-btn,
.secondary-btn,
.danger-btn,
.new-chat-btn,
.install-app-btn,
.settings-shortcut,
.composer-tool,
.icon-btn,
.send-btn,
.voice-btn,
.history-actions button,
.obra-work-tools button,
.app-dialog-actions button {
  border-radius: var(--radius-control) !important;
}

.app-dialog-form label[hidden] { display: none !important; }
.app-dialog-form .coringa-select { width: 100%; min-width: 0; }
.app-dialog-form .region-dd-btn { min-height: 45px; }

.obra-operational-timeline {
  margin-top: 12px;
  border: 1px solid rgba(184,174,160,.18);
  background: rgba(20,18,16,.46);
  overflow: hidden;
}
.obra-operational-timeline > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.obra-operational-timeline > summary::-webkit-details-marker { display: none; }
.obra-operational-timeline > summary > span { min-width: 0; display: grid; gap: 2px; }
.obra-operational-timeline > summary small { color: var(--muted); font-size: 11px; font-weight: 400; }
.obra-operational-timeline > summary > b {
  min-width: 26px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-status);
  color: var(--accent);
  background: rgba(169,78,42,.10);
  font-size: 11px;
}
.obra-operational-timeline > ol {
  max-height: min(380px, 48dvh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,174,160,.38) transparent;
}
.obra-timeline-item {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-top: 1px solid rgba(184,174,160,.1);
}
.obra-timeline-item > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.obra-timeline-item > div > span { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.obra-timeline-item time,
.obra-timeline-item small { color: var(--muted); font-size: 10px; }
.obra-timeline-item p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.5; }
.obra-timeline-target {
  padding: 3px 7px;
  border-radius: var(--radius-status);
  background: rgba(184,174,160,.08);
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 900px) {
  .sidebar { width: min(300px, calc(100vw - 20px)); }
}

@media (max-width: 520px) {
  .side-brand { grid-template-columns: minmax(0, 1fr) 40px; }
  .side-brand .brand-wordmark { font-size: clamp(16px, 5.2vw, 18px); }
  .composer-quick-actions { width: 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .composer-quick-actions:has(.composer-quick:only-child) { grid-template-columns: minmax(0, auto); justify-content: start; }
  .composer-quick { min-width: 0; width: 100%; white-space: normal; line-height: 1.15; }
  .obra-timeline-item > div { flex-direction: column; gap: 3px; }
}
.closeout-delivery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.closeout-delivery .closeout-wide { grid-column: 1 / -1; }
.obra-lifecycle-history {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184,174,160,.15);
  border-radius: 14px;
  background: rgba(184,174,160,.035);
}
.obra-lifecycle-history.is-closed { border-color: rgba(184,174,160,.32); }
.obra-lifecycle-history > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.obra-lifecycle-history > div small { color: var(--muted); font-size: 11px; text-align: right; }
.obra-lifecycle-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.obra-lifecycle-history li { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 4px; padding: 4px 0 9px; border-bottom: 1px solid rgba(184,174,160,.1); }
.obra-lifecycle-history li:last-child { padding-bottom: 4px; border-bottom: 0; }
.obra-lifecycle-history li > span { display: grid; align-content: start; gap: 1px; }
.obra-lifecycle-history li small { color: var(--muted); font-size: 10px; }
.obra-lifecycle-history li p { margin: 0; padding: 2px 0 2px 12px; border-left: 1px solid rgba(184,174,160,.18); color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.obra-lifecycle-history .obra-lifecycle-delivery { grid-column: 1 / -1; }
.scope-changes {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(184,174,160,.12);
}
.scope-changes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.scope-changes-head > strong { color: var(--text); font-size: 13px; }
.scope-changes-head > small { color: var(--muted); font-size: 11px; text-align: right; }
.scope-change-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(184,174,160,.2);
  border-radius: 14px;
  background: rgba(184,174,160,.035);
}
.scope-change-card.is-terminal { border-color: var(--border); background: rgba(230,217,198,.018); }
.scope-change-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.scope-change-title > span { display: grid; gap: 3px; min-width: 0; }
.scope-change-title strong { color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.scope-change-title small { color: var(--muted); font-size: 10px; }
.scope-change-title > b {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(184,174,160,.11);
  font-size: 10px;
  line-height: 1.2;
}
.scope-change-title > b[data-status="APPLIED"] { color: #8fd5ab; background: rgba(79,174,117,.12); }
.scope-change-title > b[data-status="REJECTED"],
.scope-change-title > b[data-status="CANCELLED"],
.scope-change-title > b[data-status="SUPERSEDED"] { color: var(--muted); background: rgba(230,217,198,.05); }
.scope-change-detail { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-change-detail span {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 10px;
}
.scope-change-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.scope-change-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.scope-change-form .input { min-height: 40px; font-size: 12px; }
.scope-change-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.scope-change-actions .primary-btn,
.scope-change-actions .secondary-btn { width: auto; min-height: 38px; padding: 8px 12px; font-size: 11px; }
.scope-change-actions .text-link { padding: 7px 4px; font-size: 11px; }
.obra-empty {
  display: grid;
  gap: 5px;
  padding: 24px 4px 8px;
  color: var(--muted);
  line-height: 1.5;
}
.obra-empty strong { color: var(--text); }
.obra-steps {
  margin: 8px 0 2px;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.obra-steps b { color: var(--text); font-weight: 700; }
.obra-empty .obra-empty-cta {
  justify-self: start;
  margin-top: 10px;
  min-height: 44px;
  padding: 11px 20px;
}

/* Interação uniforme: hover comunica resposta por cor, borda e deslocamento
   curto. Nenhum botão projeta halo ou sombra para fora do próprio controle. */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:not([aria-disabled="true"]):hover {
    box-shadow: none !important;
  }

  .primary-btn:not(:disabled):hover,
  .plan-card button:not(:disabled):hover {
    background: var(--action-primary-hover);
  }
}

.obra-create-panel.no-budget > label,
.obra-create-panel.no-budget > .obra-create-fields,
.obra-create-panel.no-budget [data-obra-create] {
  display: none;
}
.obra-create-panel.no-budget .form-message {
  order: -1;
  margin: 0;
  color: var(--muted);
}
.obra-create-panel.no-budget .obra-create-actions {
  justify-content: flex-start;
}
.obra-response { white-space: pre-wrap; }
.obra-response-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}
.obra-response-action {
  width: auto;
  min-height: 40px;
  max-width: min(100%, 360px);
  padding: 9px 13px;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}
.obra-work-switcher.is-guided,
.obra-overview.is-guided {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-soft);
}
.obra-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.obra-confirm-actions button { width: auto; min-height: 40px; }
.obra-confirmed { color: var(--accent); font-size: 13px; font-weight: 700; }
.engine-obra .chat-scroll { align-content: start; }
.engine-obra .messages { margin-top: 0; }
.engine-obra.obra-create-open .obra-work-switcher,
.engine-obra.obra-create-open .obra-overview,
.engine-obra.obra-create-open .obra-empty {
  display: none !important;
}

@media (min-width: 901px) {
  body.engine-obra.obra-empty-workspace .workspace {
    grid-template-rows: auto auto auto auto;
    align-content: start;
  }
  body.engine-obra.obra-empty-workspace .chat-scroll {
    align-content: start;
    padding-top: clamp(36px, 6vh, 96px);
    padding-bottom: 0;
  }
  body.engine-obra.obra-empty-workspace .composer {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .agreement-head { align-items: stretch; flex-direction: column; gap: 6px; }
  .agreement-head-actions { justify-content: flex-start; }
  .agreement-current,
  .agreement-form { grid-template-columns: minmax(0, 1fr); }
  .agreement-wide,
  .agreement-actions { grid-column: 1; }
  .agreement-actions .primary-btn { width: 100%; }
  .agreement-history li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .item-plan-current,
  .item-plan-form { grid-template-columns: minmax(0, 1fr); }
  .item-plan-wide,
  .item-plan-actions { grid-column: 1; }
  .item-plan-actions .secondary-btn { width: 100%; }
  .item-plan-history li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .work-order-facts,
  .work-order-form,
  .work-order-review-form { grid-template-columns: minmax(0, 1fr); }
  .work-order-wide,
  .work-order-form-actions,
  .work-order-review-actions { grid-column: 1; }
  .work-order-history li,
  .work-order-reviews li { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .work-order-form-actions .primary-btn,
  .work-order-review-actions .primary-btn,
  .work-order-actions .primary-btn,
  .work-order-actions .secondary-btn { width: 100%; }
  .scope-changes-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .scope-changes-head > small { text-align: left; }
  .scope-change-form { grid-template-columns: 1fr; }
  .scope-change-actions { grid-column: 1; }
  .obra-response-actions { display: grid; grid-template-columns: 1fr; }
  .obra-response-action { width: 100%; max-width: none; }
}

/* Gerenciamento de obras pelo Root: leitura densa sem sacrificar toque,
   hierarquia ou o ritmo visual do console administrativo. */
.root-work-list {
  display: grid;
  gap: 10px;
  width: min(100%, 880px);
}
.root-work-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, .9fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(184,174,160,.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(184,174,160,.055), rgba(12,11,9,.34));
}
.root-work-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.root-work-card strong,
.root-work-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.root-work-card > div:first-child > strong {
  color: var(--text);
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.15;
}
.root-work-card > div:first-child > span {
  color: var(--muted);
  font-size: 12px;
}
.root-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.root-work-meta span {
  padding: 5px 8px;
  border: 1px solid rgba(184,174,160,.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}
.root-work-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.root-work-actions button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(184,174,160,.055);
  color: var(--text);
  font: 500 12px/1.2 var(--font-body);
  cursor: pointer;
}
.root-work-actions button:hover,
.root-work-actions button:focus-visible {
  color: var(--accent);
  border-color: var(--border-strong);
  background: rgba(184,174,160,.1);
}
.root-work-actions .root-action-danger {
  color: #f0a29a;
  border-color: rgba(222,98,86,.28);
}
.root-work-actions .root-action-danger:hover,
.root-work-actions .root-action-danger:focus-visible {
  color: var(--text);
  border-color: rgba(255,140,140,.58);
  background: rgba(190,55,55,.24);
}
.root-work-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 880px);
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.root-work-pagination button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(184,174,160,.055);
  color: var(--text);
  font: 500 12px/1.2 var(--font-body);
  cursor: pointer;
}
.root-work-pagination button:hover,
.root-work-pagination button:focus-visible {
  color: var(--accent);
  border-color: var(--border-strong);
}

@media (max-width: 900px) {
  .obra-work-switcher { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .obra-work-tools { grid-auto-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .obra-board {
    width: calc(100% - 28px);
    border-radius: 20px;
    padding: 14px;
  }
  .obra-create-fields { grid-template-columns: minmax(0, 1fr); }
  .obra-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-closeout-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra-item { align-items: flex-start; }
  .obra-lifecycle-history > div { display: grid; gap: 3px; }
  .obra-lifecycle-history > div small { text-align: left; }
  .obra-lifecycle-history li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .obra-lifecycle-history li p { padding: 2px 0 0; border-left: 0; }
  .root-work-card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .root-work-actions { justify-content: flex-start; }
  .root-work-pagination { align-items: stretch; flex-direction: column; }
  .root-work-pagination button { width: 100%; }
}

@media (max-width: 410px) {
  .obra-work-tools { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra-work-tools [data-obra-archived-toggle] { grid-column: 1 / -1; }
  .obra-work-tools .obra-delete { grid-column: 1 / -1; }
  .obra-board-head { align-items: center; }
  .obra-summary { gap: 6px; }
  .obra-summary span { padding: 8px; }
  .obra-item { display: grid; }
  .obra-item-balance { text-align: left; }
  .work-closeout-head { align-items: stretch; flex-direction: column; }
  .work-closeout-head button { width: 100%; }
  .closeout-delivery { grid-template-columns: minmax(0, 1fr); }
  .closeout-delivery .closeout-wide { grid-column: 1; }
  .engine-popover { max-width: calc(100vw - 32px); }
}

/* Governança do Main preservada no Homolog: listas operacionais com seleção,
   ações unitárias e em massa continuam responsivas junto dos novos motores. */
.root-job-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
}
.root-job-list > div > span:nth-of-type(1) strong,
.root-job-list > div > span:nth-of-type(1) small {
  display: block;
  overflow-wrap: anywhere;
}
.root-job-list > div > span:nth-of-type(1) small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.root-event-list > div {
  grid-template-columns: auto 118px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}
.root-event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.root-event-actions button {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 11px;
  background: rgba(184,174,160,.055);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.root-event-actions .root-action-danger {
  color: #ff9b9b;
  border-color: rgba(255,140,140,.32);
}

@media (max-width: 760px) {
  .root-event-list > div,
  .root-job-list > div {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
  }
  .root-event-list > div > .root-payment-check,
  .root-job-list > div > .root-payment-check {
    grid-row: 1 / span 3;
  }
  .root-event-list > div > time,
  .root-event-list > div > span,
  .root-event-list > div > .root-event-actions,
  .root-job-list > div > span,
  .root-job-list > div > .root-event-actions {
    grid-column: 2;
  }
  .root-event-actions,
  .root-job-list > div > .root-event-actions {
    justify-content: flex-start;
    margin-top: 4px;
  }
}

/* Menu recolhido: ícones permanecem estáveis e o tooltip explica a ação sem
   projetar sombra sobre o conteúdo principal. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .app-shell.sidebar-collapsed .sidebar {
    position: relative;
    z-index: 30;
    overflow: visible;
  }

  .app-shell.sidebar-collapsed .sidebar button:hover,
  .app-shell.sidebar-collapsed .sidebar [role="button"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .app-shell.sidebar-collapsed .sidebar [data-tooltip]::after {
    left: calc(100% + 13px);
    box-shadow: none;
    transition: opacity 140ms ease;
  }

  /* Os motores usam controles de 38 px e os demais atalhos 46 px. Este
     acréscimo equaliza a borda esquerda de todos os rótulos na mesma coluna. */
  .app-shell.sidebar-collapsed .side-engine-nav button[data-tooltip]::after {
    left: calc(100% + 15px);
  }

  .app-shell.sidebar-collapsed :is(.plan-shortcut, .account-button)[data-tooltip]::after {
    left: calc(100% + 11px);
  }

  .app-shell.sidebar-collapsed .sidebar [data-tooltip]:hover::after,
  .app-shell.sidebar-collapsed .sidebar [data-tooltip]:focus-visible::after {
    transform: translateY(-50%);
  }
}