/* /chat — "Chat mocado" do Figma (zG1fSEHPqmelj67hqWMawt, página Site). Posições vêm de js/novo-chat-data.js?v=906e3941; aqui só a pele. */
@view-transition{navigation:auto;}
@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-regular.woff2") format("woff2"),url("../fonts/aeonik-regular.woff") format("woff");font-weight:400;font-display:swap;}
@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-medium.woff2") format("woff2"),url("../fonts/aeonik-medium.woff") format("woff");font-weight:500;font-display:swap;}
@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-bold.woff2") format("woff2"),url("../fonts/aeonik-bold.woff") format("woff");font-weight:700;font-display:swap;}

::selection{background:#ffe84c;color:#222;}/* seleção na cor da marca */
html{background:#f5f5f5;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:#f5f5f5;color:#222;font-family:"Aeonik",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
a{color:inherit;-webkit-tap-highlight-color:transparent;}
img,svg{display:block;}
b{font-weight:700;}

/* ---------- topo ---------- */
.cnav{position:absolute;inset:0 0 auto;height:132px;z-index:20;pointer-events:none;}
.cnav a{pointer-events:auto;}
.cnav .logo{position:absolute;left:40px;top:42px;width:48px;height:48px;view-transition-name:logo;}
.cnav .logo img{width:100%;height:100%;}
.nbtn{position:absolute;right:40px;top:42px;height:48px;box-sizing:border-box;display:none;align-items:center;justify-content:center;border-radius:99px;text-decoration:none;font-weight:500;white-space:nowrap;view-transition-name:navbtn;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;}
.nbtn.start{width:180px;background:#222;color:#eee;font-size:16px;line-height:19.2px;letter-spacing:-.48px;}
.nbtn.close{background:#fff;color:#222;padding:14.14px 16.5px;gap:6.21px;font-size:16.08px;line-height:19.8px;}
.nbtn.close img{width:19.65px;height:19.65px;}
[data-screen=home] .nbtn.start,[data-screen=conv] .nbtn.close{display:flex;}
@media (hover:hover){.nbtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,34,34,.08);}}
.nbtn:active{transform:scale(.97);}

/* ---------- palco ---------- */
.stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;}
.col{position:absolute;top:0;left:calc(50% - 384px);width:768px;height:100%;}
.ab{position:absolute;margin:0;box-sizing:border-box;}

/* home do chat */
.hc-title{font-weight:400;color:#000;text-align:center;white-space:pre-line;}
.hc-sub{text-align:center;}
.foot{position:absolute;left:calc(50% - 562.5px);overflow:hidden;background:#ffe84c;isolation:isolate;view-transition-name:liquid;will-change:transform;}
.foot img,.foot video{position:absolute;object-fit:cover;pointer-events:none;}
.foot video{opacity:0;transition:opacity .6s;}
.foot video.on{opacity:1;}
.foot-in{position:absolute;inset:0;animation:foot-float 6s ease-in-out infinite alternate;}
@keyframes foot-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (hover:hover){.foot{transition:transform .7s cubic-bezier(.2,.8,.2,1);}.foot:hover{transform:translateY(-22px);}}

/* conversa */
.bub{background:#eee;color:#222;white-space:pre;font-weight:500;}
.ans{color:#222;}
.ans .w{display:inline-block;}
.wg{will-change:transform,opacity;}
.wg .wsvg{width:100%;height:auto;overflow:visible;}
.wg svg text{font-family:"Aeonik",system-ui,sans-serif;}
.shim{position:absolute;border-radius:24px;background:linear-gradient(100deg,#f1f1f0 20%,#fbfbfa 50%,#f1f1f0 80%) 0 0/250% 100%;animation:shim 1.1s linear infinite;pointer-events:none;}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.cta{display:flex;align-items:center;gap:8px;padding:12px;height:48.81px;background:#222;color:#eee;border-radius:32px;font-size:16px;line-height:19.2px;font-weight:500;letter-spacing:-.48px;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;}
.cta img{width:24.81px;height:24.81px;}
@media (hover:hover){.cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(34,34,34,.18);}}
.cta:active{transform:scale(.97);}
.veja{color:#222;}
.typing{display:flex;gap:5px;align-items:center;height:22px;}
.typing i{width:7px;height:7px;border-radius:50%;background:#222;opacity:.25;animation:dot 1s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.25}30%{transform:translateY(-5px);opacity:.7}}

/* chips (ice breakers) */
.chip{position:absolute;display:flex;align-items:center;box-sizing:border-box;height:48px;background:#fff;border-radius:99px;color:#222;text-decoration:none;white-space:nowrap;font-weight:500;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;}
.chip img{flex:none;}
@media (hover:hover){.chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(34,34,34,.07);}}
.chip:active{transform:scale(.96);}
.chip:focus-visible,.cta:focus-visible,.nbtn:focus-visible{outline:2px solid #222;outline-offset:3px;}

/* faixas que passam da tela no celular (saldos, gastos, chips) */
.strip{position:absolute;left:0;right:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.strip::-webkit-scrollbar{display:none;}
.strip-in{position:relative;height:100%;}

/* celular */
@media (max-width:767px){
  .cnav{position:fixed;height:80px;background:rgba(245,245,245,.9);}
  .cnav .logo{left:24px;top:24px;width:32px;height:32px;}
  .nbtn{right:24.4px;top:24px;height:32px;}
  .nbtn.close{padding:9.42px 10.99px;gap:4.14px;font-size:10.71px;line-height:13.2px;}
  .nbtn.close img{width:13.1px;height:13.1px;}
  [data-screen=home] .nbtn.start{display:none;}
  [data-screen=home] .nbtn.close{display:flex;}
  .col{left:calc(50% - 196.5px);width:393px;}
  .hc-title{text-align:left;color:#222;}
  .hc-sub{text-align:left;}
  .foot{left:calc(50% - 172.5px);}
}

/* transições entre telas (View Transitions API; sem suporte, a página só troca) */
::view-transition-group(*){animation-duration:.62s;animation-timing-function:cubic-bezier(.22,1,.36,1);}
::view-transition-old(root){animation:.22s ease-out both vt-out;}
::view-transition-new(root){animation:.42s .12s ease-out both vt-in;}
::view-transition-new(liquid):only-child{animation:.8s cubic-bezier(.22,1,.36,1) both vt-rise;}
::view-transition-old(liquid):only-child{animation:.5s cubic-bezier(.55,0,.8,.2) both vt-sink;}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes vt-rise{from{transform:translateY(70%)}}
@keyframes vt-sink{to{transform:translateY(80%);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .foot-in,.shim,.typing i{animation:none;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}