/* ===========================================================
   nomo · versão DESKTOP de largura total
   - tela inteira, sem rolagem vertical
   - o que sobra vai PRO LADO (colunas com snap)
   - tema claro/escuro
   =========================================================== */

:root {
  --neu-a: #ffffff;
  --neu-b: #e3ecf8;
  --flat: #fcfdff;
  --side: rgba(255, 255, 255, .58);
  --line: rgba(146, 163, 196, .22);
  --ring: rgba(145, 129, 246, .35);
  --hover: rgba(255, 255, 255, .72);
  --active: rgba(145, 129, 246, .14);
}

html[data-theme="dark"] {
  --bg: #12172a;
  --bg-top: #151b31;
  --bg-bot: #0e1223;
  --navy: #e8eeff;
  --gray: #93a1c0;
  --card: #1b2138;
  --card-white: #1e2540;
  --sh-light: #232b48;
  --sh-dark: #080b16;
  --neu-a: #202844;
  --neu-b: #161c31;
  --flat: #1c2340;
  --side: rgba(24, 30, 52, .66);
  --line: rgba(147, 161, 192, .18);
  --hover: rgba(45, 55, 88, .7);
  --active: rgba(145, 129, 246, .26);
}

html, body { height: 100%; overflow: hidden; }
body { background: linear-gradient(180deg, var(--bg-top), var(--bg-bot)); font-size: 18px; }

/* o app original vira apenas conteúdo: fora a moldura de celular */
.app { max-width: none !important; width: 100% !important; min-height: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.screen, .screen.has-nav { min-height: 0 !important; padding: 0 !important; display: block !important; }
.scroll { overflow: visible !important; flex: none !important; }
.topbar, .bottomnav { display: none !important; }

/* neumorfismo tokenizado (segue o tema) */
.neu { background: linear-gradient(145deg, var(--neu-a), var(--neu-b)) !important; box-shadow: -6px -6px 14px var(--sh-light), 8px 8px 18px var(--sh-dark) !important; }
.neu-circle { background: linear-gradient(145deg, var(--neu-a), var(--neu-b)) !important; box-shadow: -5px -5px 12px var(--sh-light), 6px 6px 14px var(--sh-dark) !important; }
.neu-in { background: var(--bg) !important; box-shadow: inset -5px -5px 11px var(--sh-light), inset 6px 6px 12px var(--sh-dark) !important; }
.neu-flat { background: var(--flat) !important; box-shadow: 8px 10px 22px rgba(8, 12, 28, .16) !important; }

/* ---------- shell ---------- */
.d-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100dvh; width: 100%; overflow: hidden; }

/* ---------- sidebar ---------- */
.d-side {
  display: flex; flex-direction: column; gap: 14px; height: 100dvh; overflow: hidden;
  padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--side); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
}
.d-brand { display: flex; align-items: center; gap: 13px; padding: 4px 10px 2px; }
.d-brand img { width: 46px; height: 46px; border-radius: 15px; box-shadow: 4px 6px 16px rgba(8, 12, 28, .18); }
.d-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.d-brand b { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.d-brand i { font-style: normal; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }

.d-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.d-nav::-webkit-scrollbar { width: 6px; }
.d-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.d-navsec + .d-navsec { margin-top: 14px; }
.d-navlabel { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); margin: 8px 12px 7px; }
.d-navitem {
  display: flex; align-items: center; gap: 11px; padding: 6px 11px; border-radius: 16px;
  transition: background .18s ease, transform .18s ease; cursor: pointer;
}
.d-navitem:hover { background: var(--hover); transform: translateX(2px); }
.d-navitem.on { background: var(--active); box-shadow: inset 0 0 0 1.5px var(--ring); }
.d-navicon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--purple); background: linear-gradient(145deg, var(--neu-a), var(--neu-b)); box-shadow: 3px 4px 10px rgba(8, 12, 28, .14); }
.d-navitem.on .d-navicon { background: linear-gradient(160deg, #a99bff, #7b6be8); color: #fff; }
.d-navtexts { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.d-navname { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-navsub { font-size: 12.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.d-sidefoot { display: flex; flex-direction: column; gap: 10px; }
.d-theme {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; border-radius: 17px;
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b)); box-shadow: 3px 5px 14px rgba(8, 12, 28, .16);
  font-size: 15.5px; font-weight: 600; transition: transform .16s ease;
}
.d-theme:hover { transform: translateY(-1px); }
.d-theme:active { transform: scale(.98); }
.d-themeicon { display: grid; place-items: center; color: var(--yellow); }
.d-themeicon[data-moon] { display: none; color: var(--lilac); }
html[data-theme="dark"] .d-themeicon[data-sun] { display: none; }
html[data-theme="dark"] .d-themeicon[data-moon] { display: grid; }
.d-user { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 17px; background: var(--hover); }
.d-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: #fff; background: linear-gradient(160deg, #a99bff, #7b6be8); }

/* ---------- área principal ---------- */
.d-main { height: 100dvh; overflow: hidden; padding: 24px 30px 18px; display: flex; flex-direction: column; min-width: 0; }
.d-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.d-screen[hidden] { display: none; }

.d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex: none; }
.d-title { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.d-sub { font-size: 16px; color: var(--gray); font-weight: 500; margin-top: 3px; }
.d-headnav { display: flex; gap: 10px; }
.d-arrow {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--navy);
  background: linear-gradient(145deg, var(--neu-a), var(--neu-b)); box-shadow: -4px -4px 10px var(--sh-light), 5px 6px 14px var(--sh-dark);
  transition: transform .16s ease;
}
.d-arrow:hover { transform: translateY(-2px); }
.d-arrow:active { transform: scale(.94); }

/* canvas: colunas que continuam PRA DIREITA (nunca pra baixo) */
.d-canvas {
  flex: 1; min-height: 0; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr); gap: 22px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 4px 2px 10px; scrollbar-width: thin;
}
.d-canvas::-webkit-scrollbar { height: 8px; }
.d-canvas::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.d-col { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-evenly; gap: 18px; min-width: 0; height: 100%; }
.d-block { min-width: 0; }
.d-block > * { max-width: 100% !important; }
.d-canvas[data-cols="1"] { grid-auto-columns: minmax(0, 1fr); }
.d-canvas[data-cols="1"] .d-col { justify-content: center; }

.d-dots { display: flex; gap: 7px; justify-content: center; flex: none; height: 10px; }
.d-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .2s ease, background .2s ease; }
.d-dot.on { width: 26px; border-radius: 5px; background: var(--purple); }
.d-screen [data-cols="1"] ~ .d-dots { visibility: hidden; }

/* tipografia grande de desktop dentro do conteúdo do app */
.d-block { font-size: 17px; }
.d-block .title { letter-spacing: -.02em; }

/* correções de tema escuro para estilos inline claros do app original */
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background: rgb(252, 253, 255)"],
html[data-theme="dark"] [style*="background: rgb(244, 248, 254)"] { background: var(--card) !important; }
html[data-theme="dark"] [style*="linear-gradient(rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="linear-gradient(160deg, rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="linear-gradient(145deg, rgb(255, 255, 255)"] { background: linear-gradient(145deg, var(--neu-a), var(--neu-b)) !important; }
html[data-theme="dark"] [style*="color: rgb(45, 53, 86)"] { color: var(--navy) !important; }
html[data-theme="dark"] [style*="background: rgb(45, 53, 86)"] { background: #cdd7f2 !important; }
html[data-theme="dark"] [style*="rgba(255, 255, 255, 0.6)"] { color: rgba(232, 238, 255, .75) !important; }

/* telas largas: mais colunas, nunca só mais margem */
@media (min-width: 1700px) {
  .d-shell { grid-template-columns: 360px minmax(0, 1fr); }
  body { font-size: 19px; }
  .d-title { font-size: 46px; }
  .d-canvas { grid-auto-columns: minmax(360px, 1fr); gap: 26px; }
  .d-main { padding: 30px 40px 20px; }
}
@media (min-width: 2100px) {
  .d-title { font-size: 52px; }
  .d-canvas { grid-auto-columns: minmax(400px, 1fr); }
}

/* abaixo de 1024 o app volta a ser o mobile original, intocado */
@media (max-width: 1023px) {
  html, body { overflow: auto; height: auto; }
  .d-shell { display: block; }
  .d-side { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; z-index: 30; }
  .d-nav { display: flex; gap: 8px; }
  .d-navsec { margin: 0 !important; }
  .d-navlabel { display: none; }
  .d-navtexts { display: none; }
  .d-main { height: auto; overflow: visible; padding: 16px; }
  .d-canvas { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .d-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* linhas horizontais do app: no desktop mostram tudo (nada escondido fora da borda) */
.d-block .hrow { flex-wrap: wrap; overflow: visible !important; }

/* barra fixa que o app tinha embaixo (composer do chat, CTA) — vira rodapé do painel */
.d-foot { flex: none; display: flex; gap: 14px; align-items: center; padding: 4px 2px 0; }
.d-foot > * { flex: 1; min-width: 0; }

/* telas de acesso: split-screen (marca de um lado, formulário do outro) */
.d-brandcol { justify-content: center !important; align-items: center; text-align: center; }
.d-brandhero { display: grid; justify-items: center; gap: 10px; padding: 30px; border-radius: 34px;
  background: linear-gradient(160deg, var(--neu-a), var(--neu-b)); box-shadow: -8px -8px 20px var(--sh-light), 10px 12px 28px var(--sh-dark); width: 100%; }
.d-brandhero img { width: 132px; height: 132px; border-radius: 34px; box-shadow: 6px 10px 26px rgba(8, 12, 28, .22); }
.d-brandhero b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.d-brandhero span { font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); }