/* ═══════════════════════════════════════════════════════════
   nexus-life.css v3.0 — NexusAI · App Nativo 2026
   
   Filosofia: aparência e sensação de aplicativo nativo.
   Inspirado no Telegram, Linear, Arc e apps iOS 2025+.
   100% aditivo — carregado APÓS style.css.
═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   TOKENS VISUAIS EXTRAS
────────────────────────────────────────────────────────── */
:root {
  --nx-blur:         saturate(180%) blur(20px);
  --nx-blur-light:   saturate(150%) blur(12px);
  --nx-r-pill:       999px;
  --nx-r-msg:        18px;
  --nx-r-msg-tail:   5px;
  --nx-spring:       cubic-bezier(.34,1.56,.64,1);
  --nx-ease-out:     cubic-bezier(.22,1,.36,1);
  --nx-ease-in-out:  cubic-bezier(.65,0,.35,1);
  --nx-shadow-msg:   0 2px 8px rgba(0,0,0,.22);
  --nx-shadow-float: 0 8px 32px rgba(0,0,0,.35);
  --nx-user-bg:      linear-gradient(145deg, #3B6BE0 0%, #2A52C0 100%);
  --nx-user-bg-dark: linear-gradient(145deg, #4F7FE8 0%, #3560D0 100%);
  --nx-ai-bg:        rgba(255,255,255,.06);
  --nx-ai-bg-border: rgba(255,255,255,.09);
}
[data-theme="light"] {
  --nx-ai-bg:        rgba(0,0,0,.04);
  --nx-ai-bg-border: rgba(0,0,0,.08);
  --nx-user-bg:      linear-gradient(145deg, #3B6BE0 0%, #2A52C0 100%);
}

/* ──────────────────────────────────────────────────────────
   1. FUNDO — Atmosfera profunda e viva
────────────────────────────────────────────────────────── */
body {
  background: #060810;
}
[data-theme="light"] body {
  background: #F0F2F8;
}

#app::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 65% 50% at 15% 15%,
      rgba(79,127,232,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 85%,
      rgba(232,151,75,.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 50% 110%,
      rgba(45,212,160,.06) 0%, transparent 50%);
  animation: nx-atm 12s ease-in-out infinite alternate;
}
@keyframes nx-atm {
  0%   { opacity: .7 }
  50%  { opacity: 1  }
  100% { opacity: .8 }
}
[data-theme="light"] #app::before {
  background:
    radial-gradient(ellipse 65% 50% at 15% 15%,
      rgba(59,107,224,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 85%,
      rgba(196,116,42,.05) 0%, transparent 55%);
}

/* ──────────────────────────────────────────────────────────
   2. SIDEBAR — Painel lateral como app nativo
────────────────────────────────────────────────────────── */
#sidebar {
  background: rgba(8,10,20,.88);
  backdrop-filter: var(--nx-blur);
  -webkit-backdrop-filter: var(--nx-blur);
  border-right: 1px solid rgba(255,255,255,.06);
}
[data-theme="light"] #sidebar {
  background: rgba(240,242,248,.9);
  border-right: 1px solid rgba(0,0,0,.08);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F7FE8, #E8974B);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(79,127,232,.3);
  transition: transform .2s var(--nx-spring), box-shadow .2s;
}
.logo-mark:hover { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 6px 18px rgba(79,127,232,.4) }
.logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #F0F2FA, rgba(240,242,250,.65));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .logo-text {
  background: linear-gradient(135deg, #1a1d2e, rgba(26,29,46,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Botão nova conversa */
.btn-new {
  background: linear-gradient(135deg, rgba(79,127,232,.2), rgba(79,127,232,.08));
  border: 1px solid rgba(79,127,232,.25);
  color: rgba(240,242,250,.9);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  transition: all .2s var(--nx-ease-out);
  display: flex; align-items: center; gap: 8px;
}
.btn-new:hover {
  background: linear-gradient(135deg, rgba(79,127,232,.32), rgba(79,127,232,.14));
  border-color: rgba(79,127,232,.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79,127,232,.18);
}
.btn-new:active { transform: scale(.97) }

/* Campo de busca */
.search-w {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  transition: all .2s;
}
.search-w:focus-within {
  background: rgba(255,255,255,.08);
  border-color: rgba(79,127,232,.35);
  box-shadow: 0 0 0 3px rgba(79,127,232,.08);
}
[data-theme="light"] .search-w {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);
}

/* Itens da lista de conversas */
.conv-item {
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  transition: background .15s, transform .15s var(--nx-spring);
  display: flex; align-items: center; gap: 8px;
  position: relative;
}
.conv-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 65%;
  background: linear-gradient(180deg, #4F7FE8, #E8974B);
  border-radius: 0 3px 3px 0;
  transition: transform .2s var(--nx-spring);
}
.conv-item:hover { background: rgba(255,255,255,.055); transform: translateX(2px) }
.conv-item.active {
  background: rgba(79,127,232,.12);
  border: 1px solid rgba(79,127,232,.15);
}
.conv-item.active::before { transform: translateY(-50%) scaleY(1) }
[data-theme="light"] .conv-item:hover { background: rgba(0,0,0,.05) }
[data-theme="light"] .conv-item.active { background: rgba(59,107,224,.1); border-color: rgba(59,107,224,.18) }

/* Card do usuário */
.user-card {
  border-radius: 12px;
  padding: 10px 11px;
  transition: background .15s, transform .15s var(--nx-spring);
  cursor: pointer;
}
.user-card:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}
.user-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F7FE8, #E8974B);
  box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 2px 8px rgba(79,127,232,.25);
  font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.user-pl {
  font-size: .68rem;
  font-family: 'JetBrains Mono', monospace;
  color: #E8974B;
  font-weight: 500;
}

/* ──────────────────────────────────────────────────────────
   3. HEADER — Barra superior nativa
────────────────────────────────────────────────────────── */
#header {
  background: rgba(6,8,16,.82);
  backdrop-filter: var(--nx-blur-light);
  -webkit-backdrop-filter: var(--nx-blur-light);
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: background .3s;
}
[data-theme="light"] #header {
  background: rgba(240,242,248,.88);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Pill do modelo */
.model-pill {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--nx-r-pill);
  padding: 6px 14px 6px 10px;
  display: flex; align-items: center; gap: 7px;
  transition: all .2s var(--nx-ease-out);
  cursor: pointer;
}
.model-pill:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.model-pill:active { transform: scale(.97) }
.model-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.model-nm { font-size: .82rem; font-weight: 600 }

/* Botões ícone do header */
.btn-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: rgba(240,242,250,.5);
  cursor: pointer;
  transition: all .15s var(--nx-ease-out);
}
.btn-icon:hover {
  background: rgba(255,255,255,.08);
  color: rgba(240,242,250,.9);
  transform: scale(1.08);
}
.btn-icon:active { transform: scale(.93) }
[data-theme="light"] .btn-icon { color: rgba(26,29,46,.4) }
[data-theme="light"] .btn-icon:hover { background: rgba(0,0,0,.07); color: rgba(26,29,46,.9) }

/* ──────────────────────────────────────────────────────────
   4. ÁREA DE CHAT — O coração do app
────────────────────────────────────────────────────────── */

/* Tela vazia */
#empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: nx-empty-in .5s var(--nx-ease-out) both;
}
@keyframes nx-empty-in {
  from { opacity: 0; transform: translateY(20px) scale(.96) }
  to   { opacity: 1; transform: none }
}
.empty-icon {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(79,127,232,.18), rgba(232,151,75,.12));
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(79,127,232,.15), 0 0 0 1px rgba(255,255,255,.06);
  animation: nx-icon-float 4s ease-in-out infinite;
}
@keyframes nx-icon-float {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-6px) }
}
.empty-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.035em;
  background: linear-gradient(135deg, #F0F2FA 30%, rgba(240,242,250,.55));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.empty-sub {
  font-size: .9rem;
  color: rgba(240,242,250,.38);
  font-weight: 400;
}

/* ──────────────────────────────────────────────────────────
   5. MENSAGENS — A diferença mais visível
────────────────────────────────────────────────────────── */

/* Animação de entrada tipo Telegram */
.msg {
  animation: nx-msg-pop .35s var(--nx-spring) both;
  will-change: transform, opacity;
}
@keyframes nx-msg-pop {
  0%   { opacity: 0; transform: translateY(12px) scale(.95) }
  60%  { opacity: 1 }
  100% { opacity: 1; transform: none }
}
.msg.user { animation-name: nx-msg-pop-user }
@keyframes nx-msg-pop-user {
  0%   { opacity: 0; transform: translateY(10px) scale(.97) translateX(8px) }
  100% { opacity: 1; transform: none }
}

/* Avatar da IA */
.msg-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F7FE8, #E8974B);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(79,127,232,.25), 0 2px 8px rgba(0,0,0,.2);
}

/* Bolha IA */
.msg:not(.user) .msg-cnt {
  background: var(--nx-ai-bg);
  border: 1px solid var(--nx-ai-bg-border);
  border-radius: var(--nx-r-msg);
  border-bottom-left-radius: var(--nx-r-msg-tail);
  box-shadow: var(--nx-shadow-msg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 15px;
  position: relative;
  overflow: hidden;
}
.msg:not(.user) .msg-cnt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(79,127,232,.3), transparent 60%);
}

/* Bolha usuário — azul vivo como Telegram */
.msg.user .msg-cnt {
  background: var(--nx-user-bg-dark);
  border: none;
  border-radius: var(--nx-r-msg);
  border-bottom-right-radius: var(--nx-r-msg-tail);
  box-shadow: 0 2px 12px rgba(79,127,232,.3), var(--nx-shadow-msg);
  padding: 11px 15px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.msg.user .msg-cnt::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Fonte das mensagens */
.msg-cnt {
  font-size: .9rem;
  line-height: 1.62;
  letter-spacing: .01em;
}

/* Timestamp */
.msg-time {
  font-size: .64rem;
  opacity: .45;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg.user .msg-time { justify-content: flex-end }

/* Ticks de lido (estilo WhatsApp/Telegram) */
.msg.user .msg-time::after {
  content: '✓✓';
  font-size: .6rem;
  color: rgba(255,255,255,.5);
  letter-spacing: -2px;
}

/* ──────────────────────────────────────────────────────────
   6. IMAGENS GERADAS — Exibição aprimorada
────────────────────────────────────────────────────────── */
.msg-cnt img.ai-img {
  width: 100%;
  max-width: 460px;
  border-radius: 14px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  cursor: zoom-in;
  display: block;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: transform .25s var(--nx-ease-out), box-shadow .25s;
}
.msg-cnt img.ai-img:hover {
  transform: scale(1.015);
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}

/* Zoom melhorado */
#img-zoom {
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#img-zoom img {
  max-width: min(90vw, 860px);
  max-height: 88dvh;
  width: auto; height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  object-fit: contain;
  animation: nx-zoom-in .22s var(--nx-ease-out) both;
}
@keyframes nx-zoom-in {
  from { opacity: 0; transform: scale(.92) }
  to   { opacity: 1; transform: none }
}

/* ──────────────────────────────────────────────────────────
   7. INPUT AREA — Caixa de entrada refinada
────────────────────────────────────────────────────────── */
#input-area {
  background: transparent;
  padding: 12px 16px 16px;
}

.input-ctr {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.input-ctr:focus-within {
  border-color: rgba(79,127,232,.45);
  box-shadow: 0 0 0 3px rgba(79,127,232,.1), 0 4px 24px rgba(79,127,232,.08);
  background: rgba(255,255,255,.075);
}
[data-theme="light"] .input-ctr {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .input-ctr:focus-within {
  border-color: rgba(59,107,224,.4);
  box-shadow: 0 0 0 3px rgba(59,107,224,.1);
  background: #fff;
}

/* Textarea */
#msg-inp {
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: .9rem;
  line-height: 1.55;
  padding: 14px 16px 8px;
  width: 100%;
  color: var(--tx-1);
  font-family: 'Figtree', sans-serif;
  caret-color: #4F7FE8;
}
#msg-inp::placeholder { color: rgba(240,242,250,.28); font-weight: 400 }
[data-theme="light"] #msg-inp::placeholder { color: rgba(26,29,46,.28) }

/* Barra de modos */
.mode-bar {
  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
[data-theme="light"] .mode-bar { border-top-color: rgba(0,0,0,.06) }

.mode-spec-pill {
  padding: 5px 11px;
  border-radius: var(--nx-r-pill);
  border: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: rgba(240,242,250,.45);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s var(--nx-ease-out);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.mode-spec-pill:hover {
  border-color: rgba(79,127,232,.35);
  color: rgba(240,242,250,.85);
  background: rgba(79,127,232,.1);
  transform: translateY(-1px);
}
.mode-spec-pill.active {
  background: rgba(79,127,232,.18);
  border-color: rgba(79,127,232,.4);
  color: #7AA3F5;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79,127,232,.15);
}
[data-theme="light"] .mode-spec-pill { color: rgba(26,29,46,.4); border-color: rgba(0,0,0,.08) }
[data-theme="light"] .mode-spec-pill.active { background: rgba(59,107,224,.12); border-color: rgba(59,107,224,.3); color: #3B6BE0 }

/* Barra inferior do input */
.inp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
}

/* Botão enviar */
#send-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4F7FE8, #3560D0);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--nx-spring);
  box-shadow: 0 4px 12px rgba(79,127,232,.35);
  flex-shrink: 0;
}
#send-btn:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(79,127,232,.5);
  background: linear-gradient(135deg, #5B8DEF, #4070DA);
}
#send-btn:active:not(:disabled) { transform: scale(.92) }
#send-btn:disabled {
  background: rgba(255,255,255,.08);
  box-shadow: none;
  opacity: .4;
  cursor: default;
}

/* Botões de ação do input (microfone, arquivo) */
.inp-act-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(240,242,250,.38);
  cursor: pointer;
  transition: all .15s var(--nx-ease-out);
  display: flex; align-items: center; justify-content: center;
}
.inp-act-btn:hover {
  background: rgba(255,255,255,.07);
  color: rgba(240,242,250,.75);
  transform: scale(1.08);
}
.inp-act-btn:active { transform: scale(.93) }

/* ──────────────────────────────────────────────────────────
   8. DROPDOWN DE MODELO — Flutuante nativo
────────────────────────────────────────────────────────── */
#model-dd {
  background: rgba(10,12,24,.95);
  backdrop-filter: var(--nx-blur);
  -webkit-backdrop-filter: var(--nx-blur);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  padding: 8px;
  animation: nx-dd-in .2s var(--nx-ease-out) both;
}
@keyframes nx-dd-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97) }
  to   { opacity: 1; transform: none }
}
[data-theme="light"] #model-dd {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.1);
}

.m-opt {
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center; gap: 10px;
}
.m-opt:hover { background: rgba(255,255,255,.07) }
.m-opt.sel   { background: rgba(79,127,232,.14) }
[data-theme="light"] .m-opt:hover { background: rgba(0,0,0,.05) }
[data-theme="light"] .m-opt.sel   { background: rgba(59,107,224,.1) }

.m-opt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-opt-nm { font-size: .86rem; font-weight: 700; margin-bottom: 2px }
.m-opt-ds { font-size: .72rem; color: rgba(240,242,250,.42) }
[data-theme="light"] .m-opt-ds { color: rgba(26,29,46,.42) }

.mbadge {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--nx-r-pill);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
.b-fast { background: rgba(45,212,160,.12); color: #2DD4A0; border: 1px solid rgba(45,212,160,.2) }
.b-pro  { background: rgba(79,127,232,.12); color: #7AA3F5; border: 1px solid rgba(79,127,232,.2) }

/* ──────────────────────────────────────────────────────────
   9. MODAIS — Nível app nativo
────────────────────────────────────────────────────────── */
.modal-ov {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: nx-ov-in .2s ease both;
}
@keyframes nx-ov-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.modal-box {
  background: rgba(10,12,24,.97);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  animation: nx-modal-in .25s var(--nx-ease-out) both;
}
@keyframes nx-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.97) }
  to   { opacity: 1; transform: none }
}
[data-theme="light"] .modal-box {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.09);
}

/* Planos no modal */
.plan-card {
  border-radius: 14px;
  transition: all .2s var(--nx-ease-out);
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.plan-card-feat {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(232,151,75,.15);
}

.plan-btn-primary {
  background: linear-gradient(135deg, #4F7FE8, #3560D0);
  box-shadow: 0 4px 14px rgba(79,127,232,.3);
  transition: all .2s var(--nx-spring);
}
.plan-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79,127,232,.4);
}

/* ──────────────────────────────────────────────────────────
   10. LOGIN SCREEN — Tela de entrada premium
────────────────────────────────────────────────────────── */
#login-screen {
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%, rgba(79,127,232,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 75% 75%, rgba(232,151,75,.08) 0%, transparent 55%),
    #060810;
}
[data-theme="light"] #login-screen {
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%, rgba(59,107,224,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 75% 75%, rgba(196,116,42,.05) 0%, transparent 55%),
    #F0F2F8;
}

.login-box {
  background: rgba(10,12,24,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: nx-modal-in .4s var(--nx-ease-out) both;
  max-width: 400px;
  width: 100%;
  padding: 32px 28px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
[data-theme="light"] .login-box {
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.08);
}

.login-logo-mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4F7FE8, #E8974B);
  box-shadow: 0 8px 24px rgba(79,127,232,.3), 0 0 0 1px rgba(255,255,255,.12);
  animation: nx-icon-float 4s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.login-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  transition: all .2s;
}
.login-input:focus {
  border-color: rgba(79,127,232,.5);
  box-shadow: 0 0 0 3px rgba(79,127,232,.1);
  background: rgba(255,255,255,.08);
}
[data-theme="light"] .login-input {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .login-input:focus {
  border-color: rgba(59,107,224,.4);
  box-shadow: 0 0 0 3px rgba(59,107,224,.1);
  background: #fff;
}

.btn-login-main {
  background: linear-gradient(135deg, #4F7FE8, #3560D0);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(79,127,232,.3);
  transition: all .2s var(--nx-spring);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}
.btn-login-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79,127,232,.45);
  filter: brightness(1.08);
}
.btn-login-main:active { transform: scale(.97) }

.btn-google {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  transition: all .2s var(--nx-ease-out);
}
.btn-google:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
[data-theme="light"] .btn-google {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .btn-google:hover {
  background: rgba(0,0,0,.08);
}

/* ──────────────────────────────────────────────────────────
   11. TOAST — Notificações nativas
────────────────────────────────────────────────────────── */
.toast {
  background: rgba(12,14,28,.96);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  backdrop-filter: var(--nx-blur-light);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  padding: 10px 16px;
  font-size: .84rem;
  animation: nx-toast-in .25s var(--nx-spring) both;
}
@keyframes nx-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.95) }
  to   { opacity: 1; transform: none }
}
[data-theme="light"] .toast {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.1);
}

/* ──────────────────────────────────────────────────────────
   12. SCROLLBAR — Nativa e discreta
────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18) }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12) }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2) }

/* ──────────────────────────────────────────────────────────
   13. SELEÇÃO DE TEXTO — Detalhe nativo
────────────────────────────────────────────────────────── */
::selection {
  background: rgba(79,127,232,.35);
  color: #fff;
}
[data-theme="light"] ::selection {
  background: rgba(59,107,224,.25);
  color: #1a1d2e;
}

/* ──────────────────────────────────────────────────────────
   14. WAVE DE VOZ — Indicador animado
────────────────────────────────────────────────────────── */
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.vw-bar {
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #4F7FE8, #E8974B);
  animation: nx-wave 1.2s ease-in-out infinite;
}
.vw-bar:nth-child(1) { animation-delay: 0s }
.vw-bar:nth-child(2) { animation-delay: .15s }
.vw-bar:nth-child(3) { animation-delay: .3s }
.vw-bar:nth-child(4) { animation-delay: .15s }
.vw-bar:nth-child(5) { animation-delay: 0s }
@keyframes nx-wave {
  0%, 100% { height: 6px; opacity: .4 }
  50%       { height: 20px; opacity: 1 }
}

/* ──────────────────────────────────────────────────────────
   15. LOADING / TYPING — Indicador de digitação
────────────────────────────────────────────────────────── */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
}
.typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(240,242,250,.35);
  animation: nx-typing 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(1) { animation-delay: 0s }
.typing-dot:nth-child(2) { animation-delay: .2s }
.typing-dot:nth-child(3) { animation-delay: .4s }
@keyframes nx-typing {
  0%, 80%, 100% { transform: scale(.7); opacity: .4 }
  40%            { transform: scale(1);  opacity: 1  }
}

/* ──────────────────────────────────────────────────────────
   16. MARKDOWN — Código e formatação
────────────────────────────────────────────────────────── */
.msg-cnt pre {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  line-height: 1.7;
}
.msg-cnt code:not(pre code) {
  background: rgba(79,127,232,.12);
  border: 1px solid rgba(79,127,232,.2);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
  color: #7AA3F5;
}
[data-theme="light"] .msg-cnt code:not(pre code) {
  background: rgba(59,107,224,.1);
  border-color: rgba(59,107,224,.18);
  color: #3B6BE0;
}
.msg-cnt blockquote {
  border-left: 3px solid rgba(79,127,232,.5);
  padding-left: 12px;
  margin: 8px 0;
  color: rgba(240,242,250,.65);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────
   17. MEDIA QUERIES — Mobile nativo
────────────────────────────────────────────────────────── */
@media(max-width: 640px) {
  .msg-cnt img.ai-img { max-width: 100% }
  .input-ctr { border-radius: 14px }
  .modal-box { border-radius: 20px 20px 0 0 }
  .empty-title { font-size: 1.3rem }
}

/* ──────────────────────────────────────────────────────────
   18. MICRO-INTERAÇÕES — Detalhes que fazem a diferença
────────────────────────────────────────────────────────── */

/* Focus ring acessível */
*:focus-visible {
  outline: 2px solid rgba(79,127,232,.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Transição suave em links e botões */
button, a { -webkit-tap-highlight-color: transparent }

/* Cursor mais bonito */
[onclick], button, [role="button"] { cursor: pointer }

/* Animação de loading do login */
.login-loading {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nx-spin .7s linear infinite;
  display: none;
}
.loading .login-loading { display: block }
.loading #btn-login-txt { display: none }
@keyframes nx-spin {
  to { transform: rotate(360deg) }
}