@import url('tokens.css');

/* =====================================================================
   AttyClub — app.css
   Base · Layout · Primitivos · Dominio juridico · Sala de simulacao
   ===================================================================== */

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding-left: var(--s-5); }

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

.serif { font-family: var(--font-serif); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-5) 0; }

::selection { background: var(--accent-soft-2); color: var(--text); }

/* Foco visivel em tudo que e interativo. */
:where(a, button, input, select, textarea, summary, [tabindex], [role='button'], [role='tab'], [role='switch'], [role='option']):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* Leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-3); top: -60px;
  z-index: var(--z-tooltip);
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* Barras de rolagem discretas */
.scroll-y,
.sidebar,
.content,
.modal-sheet,
.drawer,
.room-side { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

.scroll-y::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar,
.modal-sheet::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
.room-side::-webkit-scrollbar { width: 10px; height: 10px; }

.scroll-y::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.modal-sheet::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb,
.room-side::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}

.scroll-y { overflow-y: auto; max-height: 320px; }
.scroll-y.tall { max-height: 560px; }
.scroll-y.short { max-height: 200px; }

/* ================================================================ LAYOUT */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

/* ---------------------------------------------------------- sidebar */
.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  height: 100vh;
  padding: var(--s-4) var(--s-3) var(--s-5);
  overflow-y: auto;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: var(--s-2) var(--s-2) var(--s-4);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand .mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: var(--r-md);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.sidebar-brand .sub {
  display: block;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-group-label {
  margin: var(--s-4) var(--s-2) var(--s-1);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.nav-group-label:first-child { margin-top: 0; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.nav-item:hover { background: var(--surface); color: var(--text); text-decoration: none; }

.nav-item svg,
.nav-item .ico { flex: none; width: 16px; height: 16px; opacity: 0.8; }

.nav-item .count {
  margin-left: auto;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.nav-item.on {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.nav-item.on::before {
  content: '';
  position: absolute;
  left: -1px; top: 50%;
  width: 2px; height: 18px;
  background: var(--accent);
  border-radius: var(--r-full);
  transform: translateY(-50%);
}
.nav-item.on svg,
.nav-item.on .ico { opacity: 1; color: var(--accent); }

.sidebar-foot { margin-top: auto; padding: var(--s-4) var(--s-2) 0; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------- main */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--topbar-h);
  padding: 0 var(--s-5);
  background: rgba(11, 17, 32, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-title .crumb { color: var(--text-3); font-size: var(--fs-sm); font-weight: var(--fw-regular); }

.topbar-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.content { flex: 1; padding: var(--s-6) var(--s-5) var(--s-12); overflow-x: hidden; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; }

/* Utilitarios de grade usados pelas paginas */
.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.spacer { flex: 1; }

.section-title {
  margin: var(--s-8) 0 var(--s-3);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.section-title:first-child { margin-top: 0; }

/* ============================================================ PRIMITIVOS */

/* ------------------------------------------------------------- card */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), var(--sh-inset);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.card-head .spacer { flex: 1; }

.card-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.card-title .hint { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-regular); }

.card-body { padding: var(--s-4); }
.card-body.tight { padding: var(--s-3); }
.card-body.flush { padding: 0; }

.card-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(0, 0, 0, 0.14);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* -------------------------------------------------------------- btn */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease), transform var(--d-instant) var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: #3a4a66; text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn svg,
.btn .ico { flex: none; width: 15px; height: 15px; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-semibold);
}
.btn.primary:hover { background: #46dcf2; border-color: #46dcf2; }

.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }

.btn.danger { background: transparent; border-color: rgba(248, 113, 113, 0.42); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn.gold {
  background: var(--gold-soft);
  border-color: var(--gold-dim);
  color: var(--gold);
  font-weight: var(--fw-semibold);
}
.btn.gold:hover { background: rgba(201, 162, 39, 0.22); border-color: var(--gold); }

.btn.sm { min-height: 28px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn.lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-md); letter-spacing: var(--ls-wide); font-weight: var(--fw-bold); }
.btn.sm svg, .btn.sm .ico { width: 13px; height: 13px; }

.btn.icon { width: 34px; min-height: 34px; padding: 0; }
.btn.icon.sm { width: 28px; min-height: 28px; }

.btn.block { width: 100%; }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.5);
}

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ----------------------------------------------------------- inputs */
.input,
.textarea,
.select {
  width: 100%;
  min-height: 34px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-3); }

.input:hover,
.textarea:hover,
.select:hover { border-color: #3a4a66; }

.input:focus,
.textarea:focus,
.select:focus { outline: none; border-color: var(--accent); background: var(--bg); }

.input[disabled],
.textarea[disabled],
.select[disabled] { opacity: 0.5; cursor: not-allowed; }

.input.mono { font-family: var(--font-mono); }

.textarea { min-height: 88px; resize: vertical; line-height: var(--lh-normal); }
.textarea.serif { font-family: var(--font-serif); font-size: var(--fs-md); line-height: var(--lh-relaxed); }

.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ------------------------------------------------------------ field */
.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }

.field > label,
.field-label {
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.field > label .req,
.field-label .req { color: var(--danger); margin-left: 2px; }

.field-hint {
  color: var(--text-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

.field-error {
  display: none;
  align-items: center;
  gap: var(--s-1);
  color: var(--danger);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}
.field-error::before { content: '!'; display: grid; place-items: center; width: 13px; height: 13px; background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--r-full); font-size: 9px; font-weight: var(--fw-bold); }

.field.invalid .field-error,
.field[data-invalid='true'] .field-error { display: flex; }
.field.invalid .field-hint,
.field[data-invalid='true'] .field-hint { display: none; }

.field.invalid :is(.input, .textarea, .select),
.field[data-invalid='true'] :is(.input, .textarea, .select),
:is(.input, .textarea, .select)[aria-invalid='true'] { border-color: var(--danger); background: rgba(248, 113, 113, 0.05); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

/* ------------------------------------------------------------- chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 26px;
  padding: 0 var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.chip:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }

.chip.on {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.chip.on::before { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: var(--r-full); }

.chip .x { margin-right: -2px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1; }
.chip .x:hover { color: var(--text); }

/* ------------------------------------------------------------ badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  background: var(--neutral-soft);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.badge.no-dot::before { display: none; }

.badge.ok { background: var(--ok-soft); border-color: rgba(52, 211, 153, 0.3); color: var(--ok); }
.badge.warn { background: var(--warn-soft); border-color: rgba(251, 191, 36, 0.3); color: var(--warn); }
.badge.danger { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.3); color: var(--danger); }
.badge.info { background: var(--info-soft); border-color: rgba(96, 165, 250, 0.3); color: var(--info); }
.badge.gold { background: var(--gold-soft); border-color: rgba(201, 162, 39, 0.34); color: var(--gold); }
.badge.muted { background: var(--neutral-soft); border-color: var(--border-2); color: var(--text-3); }

.badge.mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------- tabs */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab .count {
  padding: 1px var(--s-2);
  background: var(--surface-2);
  border-radius: var(--r-full);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.tab.on,
.tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); }
.tab.on .count,
.tab[aria-selected='true'] .count { background: var(--accent-soft); color: var(--accent); }

.tab[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------ table */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.table thead th {
  position: sticky;
  top: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--d-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }

.table td.num,
.table th.num { font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; }
.table td.muted { color: var(--text-2); }
.table td.actions { width: 1%; white-space: nowrap; text-align: right; }

.table caption { padding: var(--s-2) var(--s-4); color: var(--text-3); font-size: var(--fs-xs); text-align: left; }

.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------ empty */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  color: var(--text-3);
  font-size: var(--fs-lg);
}
.empty-icon svg { width: 20px; height: 20px; }

.empty-title { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.empty-text { max-width: 44ch; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.empty-action { margin-top: var(--s-1); }

/* --------------------------------------------------------- skeleton */
.skeleton {
  position: relative;
  height: 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 237, 245, 0.07) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: atty-shimmer var(--d-shimmer) var(--ease) infinite;
}
.skeleton.text { height: 10px; }
.skeleton.title { height: 16px; width: 48%; }
.skeleton.line-80 { width: 80%; }
.skeleton.line-60 { width: 60%; }
.skeleton.block { height: 72px; }
.skeleton.av { width: 36px; height: 36px; border-radius: var(--r-md); }

@keyframes atty-shimmer { to { transform: translateX(100%); } }

/* ---------------------------------------------------------- spinner */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: atty-spin var(--d-spin) linear infinite;
  vertical-align: -2px;
}
.spinner.sm { width: 11px; height: 11px; border-width: 1.5px; }
.spinner.lg { width: 24px; height: 24px; border-width: 2.5px; }
.spinner.gold { border-top-color: var(--gold); }

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

/* ------------------------------------------------------------ toast */
.toast-stack {
  position: fixed;
  right: var(--s-5); bottom: var(--s-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(360px, calc(100vw - var(--s-8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  pointer-events: auto;
  animation: atty-toast-in var(--d-slow) var(--ease-out);
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.danger { border-left-color: var(--danger); }
.toast.gold { border-left-color: var(--gold); }
.toast.out { animation: atty-toast-out var(--d-base) var(--ease-in) forwards; }

.toast-icon { flex: none; margin-top: 1px; color: var(--accent); font-size: var(--fs-sm); }
.toast.ok .toast-icon { color: var(--ok); }
.toast.warn .toast-icon { color: var(--warn); }
.toast.danger .toast-icon { color: var(--danger); }
.toast.gold .toast-icon { color: var(--gold); }

.toast-main { min-width: 0; flex: 1; }
.toast-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.toast-text { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.toast-close { flex: none; background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 0 2px; }
.toast-close:hover { color: var(--text); }

@keyframes atty-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes atty-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ------------------------------------------------------------ modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background: var(--overlay);
  backdrop-filter: blur(3px);
  animation: atty-fade var(--d-base) var(--ease);
}
.modal[hidden],
.modal.off { display: none; }

.modal-sheet {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  animation: atty-sheet-in var(--d-slow) var(--ease-out);
}
.modal-sheet.wide { width: min(840px, 100%); }

.modal-sheet > .card-head,
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.modal-head .card-title { font-size: var(--fs-md); }

.modal-body { padding: var(--s-5); }
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: rgba(0, 0, 0, 0.14);
  border-top: 1px solid var(--border);
}

@keyframes atty-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes atty-sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border-2);
  box-shadow: var(--sh-4);
  animation: atty-drawer-in var(--d-slow) var(--ease-out);
}
.drawer[hidden],
.drawer.off { display: none; }
.drawer.left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border-2); animation-name: atty-drawer-in-left; }

.drawer-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.drawer-body { flex: 1; padding: var(--s-5); }
.drawer-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: rgba(0, 0, 0, 0.14); }

@keyframes atty-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes atty-drawer-in-left { from { transform: translateX(-100%); } to { transform: none; } }

/* O scrim so existe para fechar o menu off-canvas no mobile. Fora disso
   precisa sumir de verdade: sem `display: none` ele cobria a tela inteira
   com --overlay e bloqueava todo clique no desktop. */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--overlay);
  animation: atty-fade var(--d-base) var(--ease);
}
body.nav-open .scrim { display: block; }
.scrim[hidden] { display: none; }

/* ---------------------------------------------------------- tooltip */
.tooltip { position: relative; display: inline-flex; }

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  z-index: var(--z-tooltip);
  max-width: 260px;
  width: max-content;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  z-index: var(--z-tooltip);
  width: 7px; height: 7px;
  background: var(--surface-3);
  border-right: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  opacity: 0;
  transform: translate(-50%, 4px) rotate(45deg);
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.tooltip:hover::after,
.tooltip:focus-within::after { opacity: 1; transform: translate(-50%, 0); }
.tooltip:hover::before,
.tooltip:focus-within::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }

.tooltip.below::after { bottom: auto; top: calc(100% + 7px); }
.tooltip.below::before { bottom: auto; top: calc(100% + 2px); transform: translate(-50%, -4px) rotate(225deg); }
.tooltip.below:hover::before { transform: translate(-50%, 0) rotate(225deg); }

/* --------------------------------------------------- progress/meter */
.progress {
  position: relative;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease);
}
.progress-bar.ok { background: var(--ok); }
.progress-bar.warn { background: var(--warn); }
.progress-bar.danger { background: var(--danger); }
.progress-bar.gold { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

.progress.indeterminate .progress-bar {
  width: 32%;
  animation: atty-indet 1.3s var(--ease) infinite;
}
@keyframes atty-indet { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

/* medidor de consumo com faixa de alerta */
.meter { display: flex; flex-direction: column; gap: var(--s-2); }

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
}
.meter-label { color: var(--text-2); font-weight: var(--fw-medium); }
.meter-value { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.meter-track {
  position: relative;
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: var(--meter, 0%);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease), background var(--d-base) var(--ease);
}

/* faixa de alerta: zona a partir de --meter-band (default 80%) */
.meter-band {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--meter-band, 80%);
  right: 0;
  background: repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.22) 0 4px, transparent 4px 8px);
  border-left: 1px solid rgba(251, 191, 36, 0.55);
  pointer-events: none;
}

.meter-foot { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--text-3); font-size: var(--fs-2xs); }

.meter.warn .meter-fill { background: var(--warn); }
.meter.warn .meter-value { color: var(--warn); }
.meter.over .meter-fill { background: var(--danger); }
.meter.over .meter-value { color: var(--danger); }

/* ---------------------------------------------------------- kv list */
.kv { display: flex; flex-direction: column; }

.kv-row {
  display: grid;
  grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row > dt,
.kv-row > :first-child { color: var(--text-3); font-size: var(--fs-xs); }
.kv-row > dd,
.kv-row > :last-child { margin: 0; color: var(--text); min-width: 0; }
.kv-row.mono > :last-child { font-family: var(--font-mono); font-size: var(--fs-xs); }

.kv.compact .kv-row { padding: var(--s-1) 0; border-bottom: 0; }

/* ---------------------------------------------------------- divider */
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s-4) 0; }
.divider.v { width: 1px; height: auto; align-self: stretch; margin: 0 var(--s-2); }
.divider.label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: auto;
  background: none;
  color: var(--text-3);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.divider.label::before,
.divider.label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ======================================================== DOMINIO JURIDICO */

/* -------------------------------------------------------- case-card */
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), var(--sh-inset);
  text-align: left;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.case-card:hover { border-color: var(--border-2); background: var(--surface-2); text-decoration: none; }
a.case-card, button.case-card { cursor: pointer; font: inherit; color: inherit; }

.case-card-head { display: flex; align-items: flex-start; gap: var(--s-3); }

.case-card-title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.case-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.case-card-meta .sep { color: var(--border-2); }
.case-card-area { color: var(--accent); font-weight: var(--fw-medium); }
.case-card-jur { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--ls-wide); }

.case-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.case-count { display: flex; flex-direction: column; gap: 1px; }
.case-count .n { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.case-count .l { color: var(--text-3); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ---------------------------------------------------------- doc-row */
.doc-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--d-fast) var(--ease);
}
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--surface-hover); }

.doc-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}
.doc-ico.pdf { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.doc-ico.docx { color: var(--info); border-color: rgba(96, 165, 250, 0.3); }
.doc-ico.img { color: var(--ok); border-color: rgba(52, 211, 153, 0.3); }
.doc-ico.audio { color: var(--warn); border-color: rgba(251, 191, 36, 0.3); }

.doc-name { min-width: 0; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { color: var(--text-3); font-size: var(--fs-2xs); }
.doc-pages { color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-state { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.doc-actions { display: flex; align-items: center; gap: var(--s-1); }

/* ---------------------------------------------------------- arg-card */
.arg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), var(--sh-inset);
}
/* barra lateral de 3px indicando o lado */
.arg-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-2);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.arg-card.side-favoravel::before { background: var(--side-favoravel); }
.arg-card.side-contraria::before { background: var(--side-contraria); }
.arg-card.side-neutro::before { background: var(--side-neutro); }

.arg-head { display: flex; align-items: center; gap: var(--s-3); }

.arg-head .agent-av { width: 32px; height: 32px; font-size: var(--fs-xs); }

.arg-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.arg-name { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.arg-role { color: var(--text-2); font-size: var(--fs-2xs); }
.arg-model {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0;
}
.arg-head .arg-meta { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.arg-body {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.arg-body p { margin-bottom: var(--s-3); }
.arg-body strong { font-weight: var(--fw-semibold); }
.arg-body blockquote {
  margin: var(--s-3) 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--border-2);
  color: var(--text-2);
  font-style: italic;
}

.arg-cites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.arg-cites-label {
  width: 100%;
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.arg-foot { display: flex; align-items: center; gap: var(--s-2); }

/* tipos de argumento */
.arg-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.arg-card.kind-thesis .arg-kind { background: var(--blue-soft); border-color: rgba(59, 130, 246, 0.34); color: var(--info); }
.arg-card.kind-objection .arg-kind { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.34); color: var(--danger); }
.arg-card.kind-rebuttal .arg-kind { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }
.arg-card.kind-judgment .arg-kind { background: var(--gold-soft); border-color: rgba(201, 162, 39, 0.4); color: var(--gold); }
.arg-card.kind-review .arg-kind { background: var(--neutral-soft); border-color: var(--border-2); color: var(--text-2); }
.arg-card.kind-human .arg-kind { background: var(--ok-soft); border-color: rgba(52, 211, 153, 0.34); color: var(--ok); }

.arg-card.kind-objection { border-color: rgba(248, 113, 113, 0.22); }
.arg-card.kind-rebuttal { border-color: rgba(34, 211, 238, 0.2); }
.arg-card.kind-review { background: var(--bg-2); }
.arg-card.kind-human { background: var(--bg-2); border-style: dashed; }

/* julgamento: o unico lugar com dourado proeminente */
.arg-card.kind-judgment {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.06), transparent 120px), var(--surface);
  border-color: rgba(201, 162, 39, 0.32);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(201, 162, 39, 0.1);
}
.arg-card.kind-judgment::before { background: var(--gold); }
.arg-card.kind-judgment .arg-body { font-size: var(--fs-lg); }
.arg-card.kind-judgment .arg-name { color: var(--gold); }

/* ------------------------------------------------------------- cite */
.cite {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  padding: 1px var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: baseline;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.cite:hover { text-decoration: none; filter: brightness(1.18); }
.cite::before { content: ''; flex: none; width: 4px; height: 4px; border-radius: var(--r-full); background: currentColor; }

.cite.verified { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }
.cite.pending { background: var(--warn-soft); border-color: rgba(251, 191, 36, 0.36); color: var(--warn); }
.cite.not-found { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.36); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; }

.cite .mark { font-weight: var(--fw-bold); }

/* --------------------------------------------------------- timeline */
.timeline { display: flex; flex-direction: column; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-3);
  padding: 0 0 var(--s-5);
}
.timeline-item:last-child { padding-bottom: 0; }

/* linha vertical */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 10px; top: 20px; bottom: 0;
  width: 1px;
  background: var(--border-2);
}
.timeline-item:last-child::before { display: none; }

/* marcador */
.timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
}

.timeline-main { min-width: 0; padding-top: 1px; }
.timeline-title { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.timeline-text { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-snug); margin-top: 2px; }
.timeline-time { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-2xs); }

.timeline-item.done .timeline-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.timeline-item.done::before { background: rgba(52, 211, 153, 0.35); }

.timeline-item.active .timeline-dot {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  color: var(--accent);
  animation: atty-dot-pulse var(--d-pulse) var(--ease) infinite;
}
.timeline-item.active .timeline-title { color: var(--text); font-weight: var(--fw-semibold); }

.timeline-item.pending .timeline-dot { background: var(--surface-2); border-color: var(--border-2); color: var(--text-3); }
.timeline-item.pending .timeline-title,
.timeline-item.pending .timeline-text { color: var(--text-3); }

.timeline-item.error .timeline-dot { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.timeline-item.error .timeline-title { color: var(--danger); }
.timeline-item.error::before { background: rgba(248, 113, 113, 0.3); }

@keyframes atty-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(34, 211, 238, 0); }
}

/* ----------------------------------------------------- evidence-row */
.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 180px);
  align-items: start;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  transition: background var(--d-fast) var(--ease);
}
.evidence-row:last-child { border-bottom: 0; }
.evidence-row:hover { background: var(--surface-hover); }

.evidence-fact { min-width: 0; color: var(--text); font-family: var(--font-serif); font-size: var(--fs-md); line-height: var(--lh-snug); }
.evidence-type { display: flex; align-items: center; }
.evidence-source {
  min-width: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  word-break: break-word;
}

/* badges de tipo de evidencia */
.ev-type {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  background: var(--neutral-soft);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.ev-type::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }

.ev-type.documentado { background: var(--ok-soft); border-color: rgba(52, 211, 153, 0.32); color: var(--ok); }
.ev-type.alegacao { background: var(--warn-soft); border-color: rgba(251, 191, 36, 0.32); color: var(--warn); }
.ev-type.inferencia { background: var(--blue-soft); border-color: rgba(59, 130, 246, 0.32); color: var(--info); }
.ev-type.hipotese { background: var(--neutral-soft); border-color: var(--border-2); color: var(--text-3); }
.ev-type.hipotese::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ev-type.verificado-externo { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }

/* ===================================================== SALA DE SIMULACAO */

.room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas:
    'bar    bar     bar    side'
    'left   center  right  side'
    'track  track   track  side';
  gap: var(--s-4);
  padding: var(--s-4);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(34, 211, 238, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* canvas de particulas da sala */
.room > canvas,
.room-fx {
  position: absolute;
  inset: 0;
  z-index: var(--z-fx);
  width: 100%; height: 100%;
  pointer-events: none;
}

.room-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.07), transparent), var(--surface);
  border: 1px solid rgba(201, 162, 39, 0.26);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.room-bar .room-bar-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gold);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.room-bar .spacer { flex: 1; }
.room-bar .agent { background: transparent; border: 0; box-shadow: none; padding: 0; }

.room-bench {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.room-bench.left { grid-area: left; border-top: 2px solid var(--side-favoravel); }
.room-bench.right { grid-area: right; border-top: 2px solid var(--side-contraria); }

.room-bench-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.room-bench.left .room-bench-label { color: var(--side-favoravel); }
.room-bench.right .room-bench-label { color: var(--side-contraria); }

.room-center {
  grid-area: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 260px;
  padding: var(--s-4);
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(59, 130, 246, 0.07), transparent 70%),
    var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}
.room-center-label {
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: center;
}
.room-center .arena { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; }

.room-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 620px;
  padding: var(--s-3);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.room-side-label {
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.room .stage-track { grid-area: track; }

/* ------------------------------------------------------------ agent */
/* grid de 2 colunas: o avatar ocupa as duas linhas, estado desce sob o nome.
   Evita que o nome do agente seja esmagado em bancadas estreitas. */
.agent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'av main' 'av state';
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease),
              transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), filter var(--d-base) var(--ease);
}

/* reserva espaco para o balao, que e absoluto e ficaria sobre o rotulo da bancada */
.agent:has(.agent-bubble) { margin-top: 56px; }

.agent-av {
  grid-area: av;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  background: linear-gradient(145deg, var(--surface-3), var(--bg-2));
  border: 1px solid var(--border-2);
  /* avatar geometrico: hexagono suave */
  border-radius: var(--r-md);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.agent-main { grid-area: main; display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.agent-name {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.agent-role { color: var(--text-2); font-size: var(--fs-2xs); line-height: var(--lh-snug); }
.agent-model {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* estado sempre textual, nunca so animacao */
.agent-state {
  grid-area: state;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
  padding: 2px var(--s-2);
  background: var(--neutral-soft);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-state::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }

/* ---- is-idle */
.agent.is-idle { opacity: 0.86; }
.agent.is-idle .agent-state { color: var(--text-3); }

/* ---- is-thinking: pulso ciano suave + anel girando no avatar */
.agent.is-thinking { border-color: var(--accent-dim); }
.agent.is-thinking .agent-state { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }
.agent.is-thinking .agent-av { animation: atty-think-pulse var(--d-pulse) var(--ease) infinite; }
.agent.is-thinking .agent-av::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(34, 211, 238, 0.3);
  border-radius: var(--r-full);
  clip-path: none;
  animation: atty-spin var(--d-spin) linear infinite;
}
@keyframes atty-think-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.22); }
  50% { filter: brightness(1.22); box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); }
}

/* ---- is-speaking: borda viva + leve elevacao */
.agent.is-speaking {
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: var(--glow-accent), var(--sh-3);
  transform: translateY(-2px);
}
.agent.is-speaking .agent-state { background: var(--accent-soft-2); border-color: var(--accent); color: var(--accent); }
.agent.is-speaking .agent-av { border-color: var(--accent); color: var(--accent); }

/* ---- is-objecting: flash vermelho curto */
.agent.is-objecting {
  border-color: var(--danger);
  box-shadow: var(--glow-danger);
  animation: atty-object-flash var(--d-slower) var(--ease) 2;
}
.agent.is-objecting .agent-state { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.agent.is-objecting .agent-av { border-color: var(--danger); color: var(--danger); }
@keyframes atty-object-flash {
  0%, 100% { background: var(--surface-2); }
  35% { background: rgba(248, 113, 113, 0.16); }
}

/* ---- is-done */
.agent.is-done { border-color: rgba(52, 211, 153, 0.34); }
.agent.is-done .agent-state { background: var(--ok-soft); border-color: rgba(52, 211, 153, 0.4); color: var(--ok); }
.agent.is-done .agent-av { border-color: rgba(52, 211, 153, 0.4); }

/* ---- is-failed: dessaturado + icone de erro */
.agent.is-failed { filter: saturate(0.25); opacity: 0.72; border-style: dashed; }
.agent.is-failed .agent-av { border-color: var(--danger); border-style: dashed; }
.agent.is-failed .agent-state { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
/* icone de erro no selo de estado: fora do clip-path do avatar, legivel e acessivel */
.agent.is-failed .agent-state::before {
  display: grid;
  place-items: center;
  content: '!';
  width: 11px; height: 11px;
  background: var(--danger);
  border-radius: var(--r-full);
  color: #1a0808;
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* ---- agent-bubble: balao curto acima do avatar, com seta */
.agent-bubble {
  position: absolute;
  left: var(--s-3);
  bottom: calc(100% + 9px);
  z-index: 2;
  max-width: 260px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  animation: atty-bubble-in var(--d-slow) var(--ease-out);
}
.agent-bubble::after {
  content: '';
  position: absolute;
  left: 15px; bottom: -5px;
  width: 9px; height: 9px;
  background: var(--surface-3);
  border-right: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  transform: rotate(45deg);
}
.agent-bubble.accent { border-color: var(--accent-dim); }
.agent-bubble.accent::after { border-color: var(--accent-dim); }
.agent-bubble.danger { border-color: rgba(248, 113, 113, 0.45); }
.agent-bubble.danger::after { border-color: rgba(248, 113, 113, 0.45); }

@keyframes atty-bubble-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------- gavel (uma vez por julgamento) */
.gavel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 112px;
  padding: var(--s-4);
  color: var(--gold);
  text-align: center;
}

.gavel-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  background: radial-gradient(circle at 40% 35%, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.07));
  border: 1.5px solid var(--gold);
  border-radius: var(--r-full);
  color: var(--gold);
  font-size: var(--fs-2xl);
  animation: atty-gavel-strike var(--d-slower) var(--ease-out);
}
.gavel-mark::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--gold);
  border-radius: var(--r-full);
  opacity: 0;
  animation: atty-gavel-ring 900ms var(--ease-out);
}
.gavel-label {
  margin-top: var(--s-3);
  color: var(--gold);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.gavel-verdict { margin-top: var(--s-1); color: var(--text); font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: var(--fw-semibold); }

@keyframes atty-gavel-strike {
  0% { transform: translateY(-26px) rotate(-22deg); opacity: 0; }
  45% { transform: translateY(0) rotate(0deg); opacity: 1; }
  58% { transform: translateY(-5px) rotate(-4deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes atty-gavel-ring {
  0% { opacity: 0.9; transform: scale(0.75); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* --------------------------------------------------- stage-track */
.stage-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* trilha de fundo + progresso */
.stage-track::before,
.stage-track::after {
  content: '';
  position: absolute;
  top: calc(var(--s-4) + 9px);
  left: calc(var(--s-4) + 10%);
  right: calc(var(--s-4) + 10%);
  height: 2px;
  border-radius: var(--r-full);
}
.stage-track::before { background: var(--border-2); }
.stage-track::after {
  right: auto;
  width: calc((100% - 2 * var(--s-4) - 20%) * var(--stage-progress, 0));
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width var(--d-slower) var(--ease);
}

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: 0;
  color: var(--text-3);
  font-family: inherit;
  text-align: center;
  cursor: default;
}

.stage-dot {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-full);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  transition: all var(--d-base) var(--ease);
}

.stage-label { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.stage-sub { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; }

.stage.done { color: var(--ok); }
.stage.done .stage-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

.stage.on { color: var(--accent); }
.stage.on .stage-dot {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
  animation: atty-dot-pulse var(--d-pulse) var(--ease) infinite;
}
.stage.on .stage-label { color: var(--accent); }

.stage.pending { color: var(--text-3); }
.stage.error { color: var(--danger); }
.stage.error .stage-dot { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.stage.gold .stage-dot { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

/* ----------------------------------------- room-compact (modo profissional) */
.room.room-compact {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'bar'
    'track'
    'left'
    'center'
    'right'
    'side';
  background: var(--bg-2);
  box-shadow: none;
}
.room.room-compact .room-center { min-height: 0; box-shadow: none; background: var(--bg); }
.room.room-compact .room-side { max-height: none; }
.room.room-compact .room-bench { border-top-width: 1px; border-left: 2px solid var(--border-2); }
.room.room-compact .room-bench.left { border-left-color: var(--side-favoravel); border-top-color: var(--border); }
.room.room-compact .room-bench.right { border-left-color: var(--side-contraria); border-top-color: var(--border); }
.room.room-compact .agent { background: var(--surface); }
.room.room-compact .agent.is-speaking { transform: none; box-shadow: var(--glow-accent); }
.room.room-compact .agent-bubble {
  position: static;
  max-width: none;
  margin-top: var(--s-2);
  box-shadow: none;
  animation: none;
}
.room.room-compact .agent-bubble::after { display: none; }
/* balao estatico no modo compacto: ocupa a largura toda e dispensa a reserva de espaco */
.room.room-compact .agent { grid-template-areas: 'av main' 'av state' 'bubble bubble'; }
.room.room-compact .agent:has(.agent-bubble) { margin-top: 0; }
.room.room-compact .agent-bubble { grid-area: bubble; }
.room.room-compact .gavel { min-height: 0; }
.room.room-compact .gavel-mark { width: 40px; height: 40px; font-size: var(--fs-lg); animation: none; }
.room.room-compact .gavel-mark::after { display: none; }
.room.room-compact .stage-track { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--s-1); }
.room.room-compact .stage-track::before,
.room.room-compact .stage-track::after { display: none; }
.room.room-compact .stage { flex-direction: row; justify-content: flex-start; gap: var(--s-3); padding: var(--s-1) 0; text-align: left; }

/* =============================================================== MOBILE */

.sidebar-toggle { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  /* sidebar off-canvas */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(290px, 86vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--d-slow) var(--ease-out);
    box-shadow: var(--sh-4);
  }
  /* O JS coloca `nav-open` no `body`, nao no `.app`. */
  .sidebar.open,
  body.nav-open .sidebar {
    transform: none;
    z-index: var(--z-drawer);
  }

  .sidebar-toggle { display: inline-flex; }

  .topbar { padding: 0 var(--s-4); gap: var(--s-3); }
  .topbar-title { font-size: var(--fs-sm); }
  .topbar-title .crumb { display: none; }

  .content { padding: var(--s-4) var(--s-4) var(--s-16); }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }

  .field-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }

  .toast-stack { right: var(--s-3); left: var(--s-3); bottom: var(--s-3); width: auto; }

  .modal { padding: 0; place-items: end stretch; }
  .modal-sheet { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }

  .drawer { width: 100%; border-left: 0; }

  /* .room adota o layout compacto automaticamente */
  .room {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'bar' 'track' 'left' 'center' 'right' 'side';
    padding: var(--s-3);
    gap: var(--s-3);
    background: var(--bg-2);
  }
  .room .room-center { min-height: 0; box-shadow: none; background: var(--bg); }
  .room .room-side { max-height: none; }
  .room .room-bench { border-top-width: 1px; border-left: 2px solid var(--border-2); }
  .room .room-bench.left { border-left-color: var(--side-favoravel); }
  .room .room-bench.right { border-left-color: var(--side-contraria); }
  .room .agent.is-speaking { transform: none; }
  .room .agent-bubble {
    position: static;
    max-width: none;
    margin-top: var(--s-2);
    box-shadow: none;
    animation: none;
  }
  .room .agent-bubble::after { display: none; }
  .room .agent { grid-template-areas: 'av main' 'av state' 'bubble bubble'; }
  .room .agent:has(.agent-bubble) { margin-top: 0; }
  .room .agent-bubble { grid-area: bubble; }
  .room .stage-track { grid-auto-flow: row; grid-auto-columns: auto; }
  .room .stage-track::before,
  .room .stage-track::after { display: none; }
  .room .stage { flex-direction: row; justify-content: flex-start; gap: var(--s-3); padding: var(--s-1) 0; text-align: left; }
  .room-bar { flex-wrap: wrap; }

  /* tabelas viram cartoes empilhados */
  .table thead { display: none; }
  .table,
  .table tbody,
  .table tr,
  .table td { display: block; width: 100%; }
  /* sem display:block o caption colapsa para a largura minima de conteudo */
  .table caption { display: block; width: 100%; padding: 0 0 var(--s-2); }
  .table tbody tr {
    margin: 0 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }
  .table tbody td:last-child { border-bottom: 0; }
  .table tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--text-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-align: left;
  }
  .table td.num { text-align: right; }
  .table td.actions { width: auto; justify-content: flex-end; }

  /* linhas de dominio empilham */
  .doc-row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: 'ico name' '.   pages' '.   state' '.   actions';
    row-gap: var(--s-2);
  }
  .doc-ico { grid-area: ico; }
  .doc-main { grid-area: name; }
  .doc-row > .doc-name { grid-area: name; }
  .doc-pages { grid-area: pages; }
  .doc-state { grid-area: state; }
  .doc-actions { grid-area: actions; }

  .evidence-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }

  .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .arg-card.kind-judgment .arg-body { font-size: var(--fs-md); }
}

/* =================================================== REDUCAO DE MOVIMENTO */
/* Nunca remove o estado: a animacao vira uma transicao de opacidade de 1 frame. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton::after { animation: none; opacity: 0.5; transform: none; }
  .progress.indeterminate .progress-bar { width: 100%; animation: none; opacity: 0.6; }
  .spinner { animation: none; border-top-color: var(--accent); border-right-color: var(--accent); }
  .agent.is-thinking .agent-av::after { animation: none; border-color: var(--accent) transparent transparent var(--accent); }
  .agent.is-thinking .agent-av { animation: none; box-shadow: 0 0 0 2px var(--accent-soft-2); }
  .agent.is-objecting { animation: none; background: rgba(248, 113, 113, 0.12); }
  .agent.is-speaking { transform: none; }
  .timeline-item.active .timeline-dot,
  .stage.on .stage-dot { animation: none; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }
  .gavel-mark { animation: none; }
  .gavel-mark::after { animation: none; opacity: 0; }
  .agent-bubble,
  .toast,
  .modal,
  .modal-sheet,
  .drawer { animation: none; }
}

/* ===================================================== utilitarios finais */
.t2 { color: var(--text-2); }
.t3 { color: var(--text-3); }
.accent { color: var(--accent); }
.gold-t { color: var(--gold); }
.ok-t { color: var(--ok); }
.danger-t { color: var(--danger); }
.warn-t { color: var(--warn); }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.caps { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }