/* ============================================================
   Voto pro Senado — Tás sabendo não?  ·  Eleições 2026
   ============================================================ */

@font-face{font-family:"Druk";src:url("../fonts/druk-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"ARS Maquette Pro";src:url("../fonts/ars-maquette-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"ARS Maquette Pro";src:url("../fonts/ars-maquette-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ARS Maquette Pro";src:url("../fonts/ars-maquette-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"ARS Maquette Pro";src:url("../fonts/ars-maquette-black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("../fonts/funnel-display.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Transforma E6";src:url("../fonts/transforma-e6.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --green:#054401;
  --yellow:#FCCA14;
  --blue:#3D17FA;
  --off:#F9F9F9;
  --mint:#D7FFBC;
  --tick:#007FFE;
  --ink:#0B0F0A;
  --green-soft:color-mix(in oklab,var(--mint) 74%,var(--green));
  --blue-soft:color-mix(in oklab,var(--off) 84%,var(--blue));
  --mint-ink-soft:color-mix(in oklab,var(--green) 72%,var(--mint));

  --font-display:"Druk","Arial Narrow",Impact,sans-serif;
  --font-body:"ARS Maquette Pro","Helvetica Neue",Arial,sans-serif;
  --font-tag:"Funnel Display","ARS Maquette Pro",sans-serif;

  --fs-display:clamp(2.75rem,1.3rem + 5.6vw,6rem);
  --fs-h1:clamp(2.125rem,1.2rem + 3.3vw,4.375rem);
  --fs-lead:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-bubble:clamp(1.0625rem,1rem + .4vw,1.25rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --bar:3.75rem;
  --section:clamp(4.5rem,9vw,8.5rem);
  --overlap:clamp(4.5rem,13vw,10.5rem);
  --wrap:1200px;
  --radius:16px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--yellow) var(--green);accent-color:var(--blue);background:var(--green)}
body{margin:0;font:400 var(--fs-body)/1.55 var(--font-body);color:var(--off);background:var(--green);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0}
::selection{background:var(--yellow);color:var(--green)}
.bg-off ::selection,.bg-mint ::selection{background:var(--blue);color:var(--off)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.bg-off :focus-visible,.bg-mint :focus-visible{outline-color:var(--blue)}
.bg-blue :focus-visible{outline-color:var(--off)}
.video--hero :focus-visible{outline-color:var(--green)}

[id]{scroll-margin-top:calc(var(--bar) + 1rem)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;background:var(--yellow);color:var(--green);font-weight:700;border-radius:999px;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.hero-grid>*,.hit-grid>*,.list-grid>*,.about-grid>*,.update-grid>*,.foot-grid>*,.msg,.msg .bubble{min-width:0}
.bg-green{background:var(--green);color:var(--off)}
.bg-blue{background:var(--blue);color:var(--off)}
.bg-off{background:var(--off);color:var(--ink)}
.bg-mint{background:var(--mint);color:var(--green)}

/* ---------- Type ---------- */
.display{font:500 var(--fs-display)/.92 var(--font-display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;margin:0 0 1.25rem}
.display--sm{font-size:clamp(2.25rem,1.4rem + 2.8vw,3.75rem)}
.lead-strong{font:700 var(--fs-lead)/1.18 var(--font-body);letter-spacing:-.012em;text-wrap:balance}
.lead{font:300 var(--fs-lead)/1.36 var(--font-body);letter-spacing:-.005em}

/* Tag "ELƐIÇÕES 202б ✳ 4 DE OUTUBRO" */
.tag,.foot-tag,.poster-label{font:400 .8125rem/1 var(--font-tag);letter-spacing:.09em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.65rem;margin:0}
.alt{font-family:"Transforma E6",var(--font-tag);font-weight:500;text-transform:none;font-size:1.08em;line-height:1;letter-spacing:0}
.ast{width:.95em;height:.95em;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.95rem 1.5rem;border-radius:999px;border:0;font:700 1rem/1 var(--font-body);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .25s,color .25s}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--primary{background:var(--yellow);color:var(--green);box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(0,0,0,.65)}
.btn--ghost{color:var(--off);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--off) 40%,transparent)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--off);transform:translateY(-2px)}
.btn--wa{background:var(--green);color:var(--off);margin-top:.9rem;box-shadow:0 12px 24px -14px rgba(0,0,0,.4);white-space:normal;text-align:center;line-height:1.2}
.btn--wa:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--green) 88%,#000)}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--green);color:var(--yellow);transition:box-shadow .3s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--bar)}
.top.is-stuck{box-shadow:0 1px 0 color-mix(in srgb,var(--yellow) 22%,transparent),0 10px 30px -20px rgba(0,0,0,.6)}
.top-brand{display:grid;align-items:center;flex:none}
.top-brand>a{grid-area:1/1;transition:opacity .25s ease,transform .45s var(--ease),visibility 0s linear .45s}
.tag{color:inherit;text-decoration:none;white-space:nowrap}
.top:not(.has-compact-logo) .tag{transition-delay:0s}
.top-lockup{display:block;width:clamp(10.5rem,18vw,13.5rem);color:var(--off);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(10px)}
.top-lockup img{width:100%;height:auto}
.top.has-compact-logo .tag{opacity:0;visibility:hidden;transform:translateY(-10px)}
.top.has-compact-logo .top-lockup{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.top nav{display:flex;gap:clamp(1rem,2.5vw,1.9rem)}
.top nav a{font:700 .9375rem/1 var(--font-body);color:var(--off);text-decoration:none;padding:.6rem 0;transition:color .2s}
.top nav a:hover{color:var(--yellow)}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(2.75rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.hero-copy{padding-block:clamp(.5rem,2vw,2.5rem) 0}
.lockup{width:min(100%,460px);height:auto;display:block;margin:0 0 clamp(2rem,4.5vw,3.5rem)}
.hero h1{font:700 var(--fs-h1)/1.04 var(--font-body);letter-spacing:-.018em;color:var(--yellow);margin:0 0 1.75rem;max-width:15ch;text-wrap:balance}
.hero .bubble{max-width:27rem;margin-bottom:2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.875rem}
.hero-art{position:relative;align-self:stretch;min-height:1px}
.pennant{position:absolute;top:calc(-1*clamp(2.75rem,6vw,5rem));right:0;width:min(100%,520px);height:auto}

.hero-video{position:relative;z-index:2;margin-top:clamp(2.5rem,6vw,4.5rem);margin-bottom:calc(-1*var(--overlap))}

/* ---------- Video facade ---------- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--green);color:var(--off);box-shadow:0 30px 60px -28px rgba(0,0,0,.55);isolation:isolate}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.is-playing{aspect-ratio:16/9}
.poster{position:absolute;inset:0;display:grid;place-items:center}
.poster-shape{position:absolute;left:5%;bottom:-9%;width:clamp(120px,27%,300px);height:auto}
.poster-shape--blue{color:var(--blue)}
.poster-shape--yellow{color:var(--yellow)}
.poster-shape path{fill:currentColor;transition:transform .9s var(--ease),opacity .6s ease}
.js .video:not(.is-in) .poster-shape path{transform:translateY(26px);opacity:0}
.js .video.is-in .poster-shape path:nth-of-type(1){transition-delay:.25s}
.js .video.is-in .poster-shape path:nth-of-type(2){transition-delay:.15s}
.js .video.is-in .poster-shape path:nth-of-type(3){transition-delay:.05s}
.play{position:relative;z-index:1;width:clamp(4.5rem,9vw,6.5rem);aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--green);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 20px 44px -18px rgba(0,0,0,.7);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .3s}
.play svg{width:40%;height:40%;fill:currentColor;transform:translateX(6%)}
.play:hover{transform:scale(1.07);box-shadow:0 26px 50px -18px rgba(0,0,0,.75)}
.poster-label{position:absolute;right:1.4rem;bottom:1.25rem;color:var(--yellow);gap:.8rem}
.soon{display:none;padding:.5rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--off) 13%,transparent);color:var(--off);font:700 .75rem/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.video.is-pending .soon{display:inline-block}
.video.is-pending .play{cursor:default;background:transparent;color:var(--yellow);box-shadow:inset 0 0 0 3px var(--yellow)}
.video.is-pending .play:hover{transform:none}
.video--hero{background:var(--yellow);color:var(--green)}
.video--hero .poster-shape{left:5%;bottom:-16%;width:clamp(170px,36%,440px)}
.video--hero .play{background:var(--green);color:var(--yellow);box-shadow:0 20px 44px -18px rgba(5,68,1,.55)}
.video--hero .play:hover{box-shadow:0 26px 50px -18px rgba(5,68,1,.6)}
.video--hero .poster-label{color:var(--green)}
.video--hero .soon{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.video--hero.is-pending .play{background:transparent;color:var(--green);box-shadow:inset 0 0 0 3px var(--green)}

/* ---------- O hit ---------- */
.hit{position:relative;padding:calc(var(--overlap) + var(--section)) 0 var(--section)}
.hit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.hit .display{color:var(--yellow)}
.hit .lead-strong{color:var(--off);max-width:22ch;margin:0 0 1.25rem}
.hit .body{color:var(--blue-soft);max-width:48ch;font-weight:400}
.video--music{aspect-ratio:1;box-shadow:0 44px 90px -34px rgba(0,0,0,.55)}
.video--music .poster{place-items:start;padding:9%}
.video--music .poster-shape{left:auto;right:6%;bottom:-6%;width:clamp(140px,44%,240px)}
.video--music .poster-label{left:1.4rem;right:auto}

/* ---------- A listinha ---------- */
.list{position:relative;overflow:hidden;padding:var(--section) 0}
.pattern{position:absolute;inset:0;pointer-events:none;overflow:hidden;font:400 clamp(3rem,7vw,6.5rem)/1.06 var(--font-tag);text-transform:uppercase;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--yellow) 22%,transparent);white-space:nowrap;user-select:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.pattern > span{display:block;margin-left:-6vw}
.pattern > span:nth-child(even){margin-left:-18vw}
.list-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.list-head{position:sticky;top:calc(var(--bar) + 2rem)}
.list .display{color:var(--yellow)}
.list-sub{color:var(--green-soft);max-width:26ch;font-size:var(--fs-lead);font-weight:400;line-height:1.3}
.chat{list-style:none;margin:0;padding:.5rem 0 0;display:flex;flex-direction:column;gap:1.4rem;max-width:660px;justify-self:end;width:100%}
.msg{position:relative;display:flex;gap:.8rem;align-items:flex-start}
.msg--out{flex-direction:row-reverse}
.avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.msg .bubble{max-width:min(100%,31rem)}
.msg--out .bubble{margin-left:auto}
.typing{position:absolute;top:0;left:calc(54px + .8rem + 10px);display:inline-flex;gap:5px;align-items:center;height:2.6rem;padding:0 .9rem;border-radius:var(--radius);border-top-left-radius:4px;background:var(--off);visibility:hidden;opacity:0;transition:opacity .2s}
.msg--out .typing{left:auto;right:calc(54px + .8rem + 10px);border-top-left-radius:var(--radius);border-top-right-radius:4px;background:var(--mint)}
.typing i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 45%,transparent);animation:blink 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
.msg.is-typing .typing{visibility:visible;opacity:1}
@keyframes blink{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-3px);opacity:1}}

/* ---------- Bubble ---------- */
.bubble{position:relative;width:fit-content;background:var(--off);color:var(--ink);border-radius:var(--radius);padding:.95rem 1.15rem .7rem;font:400 var(--fs-bubble)/1.36 var(--font-body);letter-spacing:-.005em;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.bubble p{margin:0}
.bubble strong{font-weight:700}
.bubble::before{content:"";position:absolute;top:0;width:12px;height:17px;background:inherit}
.bubble--in{border-top-left-radius:4px}
.bubble--in::before{left:-11px;clip-path:polygon(0 0,100% 0,100% 100%)}
.bubble--out{background:var(--mint);border-top-right-radius:4px}
.bubble--out::before{right:-11px;clip-path:polygon(0 0,100% 0,0 100%)}
.bubble .meta{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;margin-top:.3rem;font:400 .75rem/1 var(--font-body);color:color-mix(in srgb,var(--ink) 64%,transparent)}
.ticks{width:1.15rem;height:.8rem;color:color-mix(in srgb,var(--ink) 34%,transparent);transition:color .5s ease}
.ticks.is-read{color:var(--tick)}
.msg--cta .bubble{padding-bottom:1rem}

/* ---------- Sobre ---------- */
.about{padding:var(--section) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,7vw,6rem);align-items:center}
.map{margin:0;width:min(100%,500px)}
.map-svg{width:100%;height:auto}
.about .display{color:var(--green)}
.about .lead{color:var(--ink);max-width:30ch;margin:0 0 2rem}
.press{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;color:var(--green);font-weight:700}
.press-icon{width:1.25em;height:1.25em;flex:none}
.slot{color:var(--green);text-decoration:none;border-bottom:2px dashed color-mix(in srgb,var(--green) 45%,transparent);padding-bottom:1px;font-weight:400}
.slot:hover{border-bottom-style:solid}

/* ---------- Instituto Update ---------- */
.update{padding:clamp(3.5rem,7vw,6rem) 0}
.update-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.logo-slot{aspect-ratio:3/2;max-width:300px;border:2px dashed color-mix(in srgb,var(--green) 40%,transparent);border-radius:var(--radius);display:grid;place-items:center;text-align:center;padding:1rem;font:700 .875rem/1.35 var(--font-body);color:color-mix(in srgb,var(--green) 70%,transparent)}
.update .display{color:var(--green);margin-bottom:1rem}
.update-copy{display:flex;flex-direction:column;align-items:start}
.update-lead{font:400 clamp(1.125rem,1rem + .7vw,1.5rem)/1.35 var(--font-body);letter-spacing:-.008em;color:var(--green);max-width:38ch;margin-bottom:1rem;text-wrap:pretty}
.update-body{color:var(--mint-ink-soft);max-width:52ch;text-wrap:pretty}

/* ---------- Faixa ---------- */
.strip{background:var(--blue);color:var(--yellow);overflow:hidden;padding:1.05rem 0}
.strip-track{display:flex;align-items:center;gap:1.4rem;width:max-content;padding-inline:var(--gutter);font:400 .9375rem/1 var(--font-tag);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.strip b{font:900 .9375rem/1 var(--font-body);letter-spacing:.02em}
.strip .ast{width:1em;height:1em}

/* ---------- Footer ---------- */
.foot{padding:clamp(3.5rem,7vw,6rem) 0 clamp(6.5rem,11vw,8rem)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:end;margin-bottom:2.5rem}
.foot .lockup{width:min(100%,360px);margin:0 0 1.5rem}
.foot-tag{color:var(--yellow)}
.foot-actions{display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot nav a{font:700 .9375rem/1 var(--font-body);color:var(--off);text-decoration:none}
.foot nav a:hover{color:var(--yellow)}
.foot small{display:block;color:var(--green-soft);font:400 .8125rem/1.5 var(--font-body)}

/* ---------- FAB ---------- */
.fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.25rem;border-radius:999px;background:var(--mint);color:var(--green);font:700 .9375rem/1 var(--font-body);text-decoration:none;box-shadow:0 22px 44px -16px rgba(0,0,0,.6);transform:translateY(140%);opacity:0;transition:transform .55s var(--ease),opacity .3s,background-color .25s}
.fab svg{width:1.2em;height:1.2em}
.fab.is-visible{transform:none;opacity:1}
.fab:hover{background:var(--yellow)}

/* ---------- Motion ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-hero]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform 1s var(--ease)}
.js .pennant[data-hero]{transform:translateY(-3%)}
.js.is-loaded [data-hero]{opacity:1;transform:none}
.js.is-loaded [data-hero="0"]{transition-delay:.05s}
.js.is-loaded [data-hero="1"]{transition-delay:.1s}
.js.is-loaded [data-hero="2"]{transition-delay:.22s}
.js.is-loaded [data-hero="3"]{transition-delay:.5s;transform-origin:top right}
.js.is-loaded [data-hero="4"]{transition-delay:.7s}
.js [data-hero="3"]{transform:scale(.72);transform-origin:top right}
.js .msg .bubble{opacity:0;transform:scale(.7);transform-origin:top left;visibility:hidden}
.js .msg--out .bubble{transform-origin:top right}
.js .msg.is-in .bubble{opacity:1;transform:none;visibility:visible;transition:transform .55s var(--ease),opacity .3s ease}
.js .msg .avatar{opacity:0;transition:opacity .35s ease}
.js .msg.is-typing .avatar,.js .msg.is-in .avatar{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-hero],.js .msg .bubble,.js .msg .avatar,.js .video:not(.is-in) .poster-shape path{opacity:1!important;transform:none!important;visibility:visible!important;transition:none!important}
  .typing i{animation:none}
  .btn,.play,.fab,.top-brand>a{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  .pennant{width:min(100%,420px)}
}
@media (max-width:900px){
  .hit-grid,.list-grid,.about-grid,.update-grid{grid-template-columns:1fr}
  .hit-grid{gap:2.5rem}
  .video--music{aspect-ratio:16/9;max-width:640px}
  .list-head{position:static}
  .chat{justify-self:stretch;max-width:none}
  .map{width:min(100%,420px)}
  .update-grid{gap:1.75rem}
  .logo-slot{max-width:220px}
  .foot-grid{grid-template-columns:1fr;align-items:start}
  .foot-actions{align-items:flex-start}
}
@media (max-width:720px){
  .top nav a:not(.top-hit){display:none}
  .hero{padding-top:0}
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-art{order:-1;height:clamp(200px,58vw,300px);align-self:auto;display:flex;justify-content:center;align-items:flex-start}
  .pennant{position:static;width:auto;height:100%}
  .hero-copy{padding-top:.25rem}
  .lockup{width:min(100%,380px)}
  .hero h1{max-width:none}
  .cta-row .btn{flex:1 1 auto}
  .poster-label{right:1rem;bottom:.9rem}
  .video--hero .poster-shape{left:3%;bottom:-30%;width:28%}
  .video--hero .poster-label{top:.9rem;bottom:auto}
  .video--music .poster-label{left:1rem}
  .msg .bubble{max-width:calc(100% - 54px - .8rem)}
  .msg--cta .btn--wa{display:flex;width:100%}
}
@media (max-width:480px){
  .tag{font-size:.75rem;gap:.5rem}
  .top-lockup{width:10rem}
  .avatar{width:44px;height:44px}
  .typing{left:calc(44px + .8rem + 10px)}
  .msg--out .typing{right:calc(44px + .8rem + 10px)}
  .msg .bubble{max-width:calc(100% - 44px - .8rem)}
  .bubble{padding:.85rem 1rem .6rem}
  .btn{padding:.9rem 1.25rem}
}