/* Anti-FOUC: hide UI until app.js confirms layout is ready */
html:not(.lia-ready) body {
  visibility: hidden !important;
}
html:not(.lia-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #1B0F3D;
  z-index: 99999;
  pointer-events: none;
}

:root {
  /* Braveo palette — variable names kept (gold/ivory/etc) to avoid mass refactor;
     values now reflect Braveo's deep purple + vivid green identity. */
  --obsidian: #1B0F3D;       /* roxo profundo da Braveo (background) */
  --night: #251A4F;          /* roxo card / superfícies elevadas */
  --parchment: #2E2358;      /* roxo elevado */
  --elevation: #372A66;      /* roxo elevado 2 */
  --edge: #3B2C66;           /* bordas sutis sobre roxo */

  --gold: #1FE874;           /* verde Braveo (acento principal) */
  --gold-bright: #3FFF92;    /* verde brilhante (hover) */
  --gold-muted: #0FB158;     /* verde médio */
  --gold-soft: #1A8048;      /* verde sutil (bordas hover) */

  --ivory: #FFFFFF;          /* branco (texto principal) */
  --mist: #B5ABCB;           /* lilás claro (texto secundário) */
  --fog: #7A6F94;            /* roxo desbotado (labels, placeholders) */

  --purple: #5A3F8A;         /* roxo médio (acento) */
  --purple-dark: #3A2660;    /* roxo escuro */
  --moss: #4A6B3E;           /* verde sucesso (já harmonioso) */
  --crimson: #E74C5E;        /* vermelho erro (sobre roxo) */

  --f-display: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-edit: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-ui: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "Geist Mono", "Fira Code", monospace;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color-scheme: dark;
  background: var(--obsidian);
  color: var(--ivory) !important;
  font-family: var(--f-ui) !important;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  letter-spacing: 0.01em;
  background:
    radial-gradient(circle at 50% -8%, rgba(31, 232, 116, 0.18), transparent 28%),
    radial-gradient(circle at 85% 100%, rgba(31, 232, 116, 0.12), transparent 32%),
    linear-gradient(180deg, #1B0F3D 0%, #1F1245 48%, #251A4F 100%) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

body::after {
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.52) 100%);
}

main,
[role="main"],
#root {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ivory) !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

p,
li,
span,
label,
input,
textarea,
button {
  font-family: var(--f-ui) !important;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gold-bright);
}

a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
[data-sidebar="menu-button"]:focus-visible,
[data-sidebar="group-action"]:focus-visible {
  outline: 2px solid rgba(31, 232, 116, 0.95) !important;
  outline-offset: 2px !important;
}

::selection {
  background: rgba(31, 232, 116, 0.28) !important;
  color: var(--ivory) !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(27, 15, 61, 0.68);
}

::-webkit-scrollbar-thumb {
  background: rgba(31, 232, 116, 0.18);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 232, 116, 0.3);
}

strong,
b {
  color: var(--gold-bright);
}

em {
  font-family: var(--f-edit);
}

code,
pre,
.font-mono,
kbd {
  font-family: var(--f-mono);
}

kbd {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--mist);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
}

blockquote {
  margin: 1rem 0;
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 1px solid rgba(31, 232, 116, 0.38);
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--f-edit) !important;
  font-style: italic;
  background: transparent !important;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  overflow: hidden;
}

th {
  background: rgba(37, 26, 79, 0.94) !important;
  color: var(--gold) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.72rem;
  font-weight: 500 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

tr:hover td {
  background: rgba(31, 232, 116, 0.035) !important;
}

pre {
  margin: 1rem 0 !important;
  padding: 1rem 1.1rem !important;
  border-left: 2px solid rgba(31, 232, 116, 0.48) !important;
  background: rgba(37, 26, 79, 0.9) !important;
  border-radius: 0 8px 8px 0 !important;
  overflow-x: auto;
}

code:not(pre code) {
  color: var(--gold) !important;
  background: rgba(31, 232, 116, 0.08) !important;
  padding: 0.1rem 0.36rem;
  border-radius: 0.28rem;
}

textarea,
input {
  color: var(--ivory);
  caret-color: var(--gold);
}

textarea::placeholder,
input::placeholder {
  color: rgba(181, 171, 203, 0.82);
}

input:focus {
  border-color: rgba(31, 232, 116, 0.42);
  box-shadow: 0 0 0 3px rgba(31, 232, 116, 0.12);
}

button[data-testid="send-button"],
button[data-variant="default"] {
  background: var(--gold) !important;
  color: var(--obsidian) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
}

button[data-testid="send-button"]:hover,
button[data-variant="default"]:hover {
  background: var(--gold-bright) !important;
  border-color: var(--gold-bright) !important;
  transform: none !important;
  box-shadow: none !important;
}

button[data-variant="outline"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.015) !important;
  color: var(--ivory) !important;
}

button[data-variant="outline"]:hover {
  border-color: rgba(31, 232, 116, 0.42) !important;
  background: rgba(31, 232, 116, 0.05) !important;
  color: var(--gold-bright) !important;
}

/* ─── AUTH VIEW — full Atrium + Form Panel reproduction of Material Visual/Portal de Acesso.html ─── */

body.lia-auth-view {
  background: var(--obsidian) !important;
}

body.lia-auth-view::before,
body.lia-auth-view::after {
  display: none !important;
}

a[href*="chainlit"],
a[href*="Chainlit"],
.watermark,
[class*="watermark"],
[class*="Watermark"] {
  display: none !important;
}

/* Outer grid: invert columns so cover (atrium) is left, form is right */
body.lia-auth-view .grid.min-h-svh {
  direction: rtl;
  background: var(--obsidian);
}

body.lia-auth-view .grid.min-h-svh > * {
  direction: ltr;
}

/* ============ LEFT PANEL: ATRIUM ============ */

body.lia-auth-view .grid.min-h-svh > div.bg-muted {
  position: relative !important;
  overflow: hidden !important;
  padding: 48px 56px !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(31, 232, 116, 0.1), transparent 42%),
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 30%, rgba(31, 232, 116, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(31, 232, 116, 0.06), transparent 60%),
    var(--obsidian) !important;
  background-size: auto, 96px 96px, 96px 96px, auto, auto, auto !important;
  border-right: 1px solid var(--edge) !important;
}


/* Brand top-left: "BRAVEO" wordmark */
body.lia-auth-view .grid.min-h-svh > div.bg-muted::before {
  content: "BRAVEO";
  position: absolute;
  top: 48px;
  left: 56px;
  z-index: 5;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* Tagline above status bar */
body.lia-auth-view .grid.min-h-svh > div.bg-muted::after {
  content: "Lia\A assistente interna da Braveo.";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 110px;
  color: var(--ivory);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  letter-spacing: -0.005em;
  z-index: 3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Native <img> stays — but no drop-shadow (was clipped by overflow creating ghost rectangle) */
body.lia-auth-view img[src*="login-imperial"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center 46% !important;
  padding: 130px 4vw 140px 4vw !important;
  box-sizing: border-box !important;
  background: transparent !important;
  filter: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

/* Brand, breadcrumb, citation, status sit above the sigil */
body.lia-auth-view .grid.min-h-svh > div.bg-muted::before,
body.lia-auth-view .grid.min-h-svh > div.bg-muted::after,
body.lia-auth-view .lia-atrium-crumb,
body.lia-auth-view .lia-atrium-status {
  z-index: 4 !important;
}

/* Breadcrumb — Reino · Portaria · Selo */
body.lia-auth-view .lia-atrium-crumb {
  position: absolute;
  top: 90px;
  left: 56px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fog);
}

body.lia-auth-view .lia-atrium-crumb .sep { color: var(--gold-soft); }
body.lia-auth-view .lia-atrium-crumb .cur { color: var(--gold); }

/* Status bar at bottom of atrium */
body.lia-auth-view .lia-atrium-status {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.lia-auth-view .lia-atrium-status .cell {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fog);
  line-height: 1.8;
}
body.lia-auth-view .lia-atrium-status .cell.right { text-align: right; }
body.lia-auth-view .lia-atrium-status .cell .l {
  display: block;
  color: var(--gold-soft);
  font-size: 9px;
  letter-spacing: 0.4em;
  margin-bottom: 2px;
}
body.lia-auth-view .lia-atrium-status .cell .v { color: var(--ivory); }

body.lia-auth-view .lia-atrium-status .badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--edge);
  background: rgba(37, 26, 79, 0.7);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mist);
}
body.lia-auth-view .lia-atrium-status .badge .g { color: var(--gold); }
body.lia-auth-view .lia-atrium-status .badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 8px var(--moss);
  animation: lia-status-beat 2.2s ease-in-out infinite;
}
@keyframes lia-status-beat { 50% { opacity: 0.45; } }

/* ============ RIGHT PANEL: FORM ============ */

/* Hide the Chainlit native logo on top of the form column (we don't want a duplicate brand) */
body.lia-auth-view .grid.min-h-svh > div:not(.bg-muted) > div:first-child {
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.lia-auth-view .grid.min-h-svh > div:not(.bg-muted) {
  padding: 48px 56px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

body.lia-auth-view form {
  position: relative;
  z-index: 4;
  width: 100% !important;
  max-width: 440px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* Kicker above the title */
body.lia-auth-view form::before {
  content: "BRAVEO · LIA";
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Title — Cinzel uppercase + italic gold subtitle */
body.lia-auth-view form h1,
body.lia-auth-view form h2,
body.lia-auth-view form h3 {
  margin: 0 0 14px !important;
  color: var(--ivory) !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  hyphens: none !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body.lia-auth-view form h1::after,
body.lia-auth-view form h2::after,
body.lia-auth-view form h3::after {
  content: "use seu acesso corporativo.";
  display: block;
  margin-top: 10px;
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 400;
  font-size: 0.45em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist);
}

/* Subtitle paragraph: Chainlit doesn't add one — inject via ::after on title above. The single existing <p> if any becomes the lead. */
body.lia-auth-view form p,
body.lia-auth-view form .description {
  margin: 0 0 22px !important;
  color: var(--mist) !important;
  font-family: var(--f-edit) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  max-width: 36ch !important;
}

/* Field labels in mono uppercase */
body.lia-auth-view form label {
  display: block !important;
  margin-bottom: 10px !important;
  color: var(--fog) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
}

body.lia-auth-view form label::after {
  content: " ·";
  color: var(--gold);
  margin-left: 4px;
}

/* Input wrapper border treatment */
body.lia-auth-view form input {
  width: 100% !important;
  min-height: 52px !important;
  padding: 16px !important;
  border-radius: 0 !important;
  border: 1px solid var(--edge) !important;
  background: var(--night) !important;
  color: var(--ivory) !important;
  font-family: var(--f-ui) !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body.lia-auth-view form input::placeholder {
  color: var(--fog) !important;
  font-family: var(--f-edit) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
}

/* Hide persistent "required" helper text under inputs (only show on actual error state) */
body.lia-auth-view form [class*="description"],
body.lia-auth-view form [class*="Description"],
body.lia-auth-view form [class*="helper"],
body.lia-auth-view form [class*="message"]:not([role="alert"]) {
  display: none !important;
}

/* Real validation errors stay visible */
body.lia-auth-view form [role="alert"],
body.lia-auth-view form [class*="error"]:not(button):not(form) {
  display: block !important;
  margin-top: 8px !important;
  color: var(--crimson) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

body.lia-auth-view form input:hover {
  border-color: var(--gold-soft) !important;
}

body.lia-auth-view form input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(31, 232, 116, 0.14) !important;
  outline: none !important;
}

/* Primary CTA — gold flat, square */
body.lia-auth-view form button[type="submit"] {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 17px 24px !important;
  background: var(--gold) !important;
  color: var(--obsidian) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: var(--f-ui) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

body.lia-auth-view form button[type="submit"]:hover {
  background: var(--gold-bright) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 10px 32px rgba(31, 232, 116, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* OAuth/separator if present */
body.lia-auth-view form [class*="separator"],
body.lia-auth-view form hr {
  border-color: var(--edge) !important;
  color: var(--fog) !important;
  font-family: var(--f-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  margin: 28px 0 !important;
}

@media (max-width: 1024px) {
  body.lia-auth-view .grid.min-h-svh > div:not(.bg-muted) {
    padding: 32px 24px !important;
  }
}

body:not(.lia-auth-view) [data-sidebar="sidebar"] {
  background: linear-gradient(180deg, rgba(37, 26, 79, 0.98), rgba(27, 15, 61, 0.98)) !important;
  border-right: 1px solid rgba(59, 44, 102, 0.88) !important;
  box-shadow: none !important;
}

body:not(.lia-auth-view) [data-sidebar="sidebar"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(59, 44, 102, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 44, 102, 0.12) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.65), transparent 78%);
  pointer-events: none;
}

body:not(.lia-auth-view) [data-sidebar="content"] {
  background: transparent !important;
}

body:not(.lia-auth-view) [data-sidebar="group-label"] {
  color: var(--fog) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) [data-sidebar="menu-button"] {
  border-radius: 0 !important;
  color: var(--mist) !important;
  font-size: 0.88rem !important;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

body:not(.lia-auth-view) [data-sidebar="menu-button"]:hover {
  background: rgba(31, 232, 116, 0.04) !important;
  color: var(--ivory) !important;
}

body:not(.lia-auth-view) [data-sidebar="menu-button"][data-active="true"] {
  background: rgba(31, 232, 116, 0.05) !important;
  color: var(--ivory) !important;
  box-shadow: inset 2px 0 0 0 rgba(31, 232, 116, 0.9);
}

body:not(.lia-auth-view) #sidebar-trigger-button,
body:not(.lia-auth-view) #new-chat-button,
body:not(.lia-auth-view) #search-chats-button {
  border-radius: 0 !important;
  color: var(--mist) !important;
}

body:not(.lia-auth-view) #sidebar-trigger-button:hover,
body:not(.lia-auth-view) #new-chat-button:hover,
body:not(.lia-auth-view) #search-chats-button:hover {
  background: rgba(31, 232, 116, 0.04) !important;
  color: var(--gold) !important;
}

body:not(.lia-auth-view) .watermark {
  color: var(--fog) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) #welcome-screen {
  position: relative;
  max-width: min(44rem, 100%);
  gap: 1.25rem !important;
  padding: 5rem 1rem 2rem;
}

body:not(.lia-auth-view) #welcome-screen::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 7rem;
  height: 7rem;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='none'><rect x='8' y='8' width='84' height='84' rx='18' stroke='%231FE874' stroke-opacity='0.22' stroke-width='1.5'/><path d='M34 26 L34 70 L66 70' stroke='%231FE874' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/><circle cx='66' cy='32' r='5' fill='%231FE874'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 40px rgba(31, 232, 116, 0.18));
  pointer-events: none;
}

body:not(.lia-auth-view) #welcome-screen::after {
  content: "ASSISTENTE BRAVEO";
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) #welcome-screen .logo {
  display: none !important;
}

body:not(.lia-auth-view) #welcome-screen h1 {
  color: var(--ivory) !important;
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 7rem;
}

body:not(.lia-auth-view) #welcome-screen p {
  color: var(--mist) !important;
  font-family: var(--f-edit) !important;
  font-size: 1.06rem;
  font-style: italic;
}

body:not(.lia-auth-view) #starters button {
  border-radius: 0 !important;
  border-color: rgba(59, 44, 102, 0.94) !important;
  background: rgba(37, 26, 79, 0.88) !important;
  color: var(--mist) !important;
}

body:not(.lia-auth-view) #starters button:hover {
  border-color: rgba(31, 232, 116, 0.38) !important;
  background: rgba(31, 232, 116, 0.04) !important;
  color: var(--ivory) !important;
}

body:not(.lia-auth-view) .step {
  padding-block: 0.85rem !important;
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .ai-message {
  gap: 1rem !important;
  align-items: flex-start !important;
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .ai-message > div:last-child {
  position: relative;
  padding-left: 1rem;
  border-left: 1px solid rgba(59, 44, 102, 0.88);
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .ai-message > div:last-child::before {
  content: "LIA";
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  color: var(--gold);
  font-family: var(--f-mono) !important;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .ai-message > div:last-child::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(31, 232, 116, 0.35);
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .message-content p {
  margin: 0 0 0.9rem;
  color: var(--ivory) !important;
  font-size: 0.99rem;
  line-height: 1.78;
}

body:not(.lia-auth-view) [data-step-type="assistant_message"] .message-content p:first-child {
  color: rgba(224, 194, 123, 0.96) !important;
  font-family: var(--f-edit) !important;
  font-style: italic;
  font-size: 1.05rem;
}

body:not(.lia-auth-view) [data-step-type="user_message"] .bg-accent {
  max-width: min(44rem, 100%) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 0.1rem 0 0.1rem 1rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(59, 44, 102, 0.88) !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}

body:not(.lia-auth-view) [data-step-type="user_message"] .bg-accent::before {
  content: "VOCÊ";
  display: block;
  margin-bottom: 0.55rem;
  color: var(--fog);
  font-family: var(--f-mono) !important;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) [data-step-type="user_message"] .bg-accent .message-content,
body:not(.lia-auth-view) [data-step-type="user_message"] .bg-accent p {
  color: var(--mist) !important;
  line-height: 1.75 !important;
}

body:not(.lia-auth-view) [id^="step-"] {
  color: var(--gold) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

body:not(.lia-auth-view) .loading-shimmer {
  color: var(--gold) !important;
}

body:not(.lia-auth-view) [cmdk-dialog],
body:not(.lia-auth-view) [data-popover-content="true"],
body:not(.lia-auth-view) [role="dialog"] {
  border-radius: 0 !important;
  border-color: rgba(59, 44, 102, 0.92) !important;
  background: linear-gradient(180deg, rgba(37, 26, 79, 0.98), rgba(27, 15, 61, 0.98)) !important;
}

/* Composer wrapper — constrain to 720px centered, square corners, dark fill */
body:not(.lia-auth-view) #message-composer {
  max-width: 720px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  border: 1px solid rgba(59, 44, 102, 0.94) !important;
  background: rgba(37, 26, 79, 0.94) !important;
  padding: 0.5rem 0.65rem !important;
  min-height: 0 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body:not(.lia-auth-view) #message-composer:focus-within {
  border-color: rgba(31, 232, 116, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(31, 232, 116, 0.14) !important;
}

/* Textarea inside composer — transparent, no border (the wrapper carries the frame) */
body:not(.lia-auth-view) #chat-input,
body:not(.lia-auth-view) textarea:not(#edit-chat-input) {
  min-height: 44px !important;
  padding: 0.75rem 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--f-ui) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

body:not(.lia-auth-view) #chat-input:focus,
body:not(.lia-auth-view) textarea:not(#edit-chat-input):focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body:not(.lia-auth-view) #chat-input::placeholder,
body:not(.lia-auth-view) textarea:not(#edit-chat-input)::placeholder {
  color: var(--fog) !important;
  font-family: var(--f-edit) !important;
  font-size: 1.02rem;
  font-style: italic;
}

/* The container wrapping #message-composer also gets centered + max-width treatment */
body:not(.lia-auth-view) #message-composer ~ *,
body:not(.lia-auth-view) div:has(> #message-composer) {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.lia-auth-view) .edit-message,
body:not(.lia-auth-view) .favorite-message {
  border-radius: 0 !important;
  color: var(--fog) !important;
}

body:not(.lia-auth-view) .edit-message:hover,
body:not(.lia-auth-view) .favorite-message:hover {
  background: rgba(31, 232, 116, 0.04) !important;
  color: var(--gold) !important;
}

@media (max-width: 960px) {
  body:not(.lia-auth-view) #welcome-screen {
    padding-top: 4.6rem;
  }
  body:not(.lia-auth-view) #welcome-screen::before {
    width: 5rem;
    height: 5rem;
  }
  body:not(.lia-auth-view) #welcome-screen h1 {
    margin-top: 5.2rem;
  }
}

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