/* a fonte da Le */
@font-face{font-family:'Seashells';
  src:url('/fonts/seashells.woff2') format('woff2'),url('/fonts/seashells.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}
:root{--bg:#7A0F3D;--tinta:#FFFBF3}
html,body{min-height:100dvh}
body{margin:0;background:var(--bg);color:var(--tinta);overflow-x:hidden;
  font:400 18px/1.35 'Seashells',-apple-system,system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;
  padding:3vh 24px calc(24px + env(safe-area-inset-bottom))}
[hidden]{display:none!important}

/* ela: flutua em cima, toca nela pra falar */
.ela{width:min(46vh,78vw);height:auto;display:block;cursor:pointer;user-select:none;-webkit-user-drag:none;
  animation:boia 6.5s ease-in-out infinite;transform-origin:50% 60%;transition:width .5s cubic-bezier(.22,1,.36,1),opacity .3s,filter .3s}
html.dentro .ela{width:min(36vh,60vw)}
.ela.gravando{filter:drop-shadow(0 0 30px color-mix(in oklab,var(--tinta) 45%,transparent))}
.ela.pensa{opacity:.7}
@keyframes boia{0%,100%{transform:translateY(0) rotate(-1.1deg)}25%{transform:translateY(-16px) rotate(.8deg)}
  50%{transform:translateY(-6px) rotate(1.3deg)}75%{transform:translateY(10px) rotate(-.7deg)}}

.dela{max-width:min(760px,90vw);margin:2vh auto 0;text-align:center;white-space:pre-line;
  font-size:clamp(26px,3.4vw,42px);line-height:1.02;min-height:1.1em;overflow-wrap:break-word}

.porta,.conversa,.subir{width:min(560px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px;
  animation:chega .6s cubic-bezier(.22,1,.36,1) both}
.conversa{width:min(820px,100%);flex:1;justify-content:space-between;gap:3vh}
.porta .dela{font-size:clamp(24px,2.6vw,34px);margin-bottom:1vh}
@keyframes chega{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

input,textarea{font:inherit;color:var(--tinta);background:transparent;border:0;
  border-bottom:1.5px solid color-mix(in oklab,var(--tinta) 45%,transparent);
  padding:10px 2px;outline:none;border-radius:0;resize:none;width:100%;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--tinta)}
::placeholder{color:color-mix(in oklab,var(--tinta) 55%,transparent)}

.botao{font:inherit;font-size:22px;color:var(--bg);background:var(--tinta);border:0;border-radius:999px;
  padding:14px 28px;cursor:pointer;text-decoration:none;text-align:center;align-self:center;
  transition:transform .2s cubic-bezier(.3,1.4,.4,1);animation:chega .5s .3s cubic-bezier(.22,1,.36,1) both}
.botao:hover{transform:scale(1.04)}.botao:active{transform:scale(.97)}
.botao:disabled{opacity:.6}
.miudo{text-align:center;font-size:14px;opacity:.7}

.vez{display:flex;align-items:flex-end;gap:10px;width:100%}
.manda{font:inherit;font-size:28px;color:var(--tinta);background:none;border:0;cursor:pointer;padding:6px 4px;
  transition:transform .2s}
.manda:hover{transform:translateX(4px)}

.pensando{display:inline-flex;gap:7px;align-items:center}
.pensando i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pisca 1.25s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.16s}.pensando i:nth-child(3){animation-delay:.32s}
@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}

.ecoando{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  max-width:88vw;text-align:center;font-size:15px;opacity:0;transition:opacity .25s;pointer-events:none}
.ecoando.on{opacity:.85}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* nunca o contorno azul */
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }