/* Réplica das telas do app Todas Por Uma.
   Todas as medidas partem da referência de 390x844 usada no Flutter:
   --s é um número puro que converte px do app para px da página
   (0.84 = o aparelho aparece com 84% do tamanho real). */

.phone {
  --s: .84;
  --st: var(--s);

  --c-coral: #FF5959;
  --c-coral-dark: #E04A4A;
  --c-bege: #FFEFE8;
  --c-card: #FFFFFF;
  --c-txt: #000000;
  --c-txt2: #666666;
  --c-txt3: #999999;
  --c-divider: #E0E0E0;
  --c-error: #F44336;
  --c-success: #4CAF50;
  --c-warning: #FF9800;
  --c-info: #2196F3;

  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  position: relative;
  border-radius: calc(52px * var(--s));
  background: #100C0B;
  padding: calc(11px * var(--s));
  box-shadow:
    0 calc(30px * var(--s)) calc(70px * var(--s)) rgba(60, 25, 20, .28),
    0 0 0 calc(2px * var(--s)) #2A2321;
  font-family: 'Roboto', sans-serif;
  color: var(--c-txt);
  flex: none;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(42px * var(--s));
  overflow: hidden;
  background: var(--c-bege);
  isolation: isolate;
}

/* Ilha / câmera */
.phone__notch {
  position: absolute;
  top: calc(11px * var(--s));
  left: 50%;
  transform: translateX(-50%);
  width: calc(104px * var(--s));
  height: calc(28px * var(--s));
  border-radius: 999px;
  background: #100C0B;
  z-index: 8;
}

/* Barra de status */
.phone__status {
  position: absolute;
  top: calc(11px * var(--s));
  left: calc(11px * var(--s));
  right: calc(11px * var(--s));
  height: calc(44px * var(--s));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(24px * var(--s));
  font-size: calc(13px * var(--st));
  font-weight: 600;
  color: #000;
  z-index: 9;
  pointer-events: none;
  transition: color .35s ease;
}
.phone[data-tone="light"] .phone__status { color: #fff; }
.phone__status .sig { display: flex; align-items: center; gap: calc(4px * var(--s)); }
.phone__status .sig i {
  display: block;
  width: calc(3px * var(--s));
  background: currentColor;
  border-radius: 1px;
}
.phone__status .sig i:nth-child(1) { height: calc(4px * var(--s)); }
.phone__status .sig i:nth-child(2) { height: calc(6px * var(--s)); }
.phone__status .sig i:nth-child(3) { height: calc(8px * var(--s)); }
.phone__status .bat {
  width: calc(22px * var(--s));
  height: calc(11px * var(--s));
  border: calc(1.4px * var(--s)) solid currentColor;
  border-radius: calc(3px * var(--s));
  padding: calc(1.5px * var(--s));
}
.phone__status .bat span { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; }

/* ---------- Telas ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.screen.is-active { opacity: 1; visibility: visible; }

.safe-top { height: calc(44px * var(--s)); flex: none; }

.ic { width: 1em; height: 1em; fill: currentColor; display: block; flex: none; }

/* AppBar coral (inclui a área da barra de status) */
.app-bar {
  flex: none;
  background: var(--c-coral);
  color: #fff;
  padding: calc(44px * var(--s)) calc(6px * var(--s)) 0;
  height: calc(100px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(2px * var(--s));
}
.app-bar__btn {
  width: calc(34px * var(--s));
  height: calc(34px * var(--s));
  display: grid;
  place-items: center;
  font-size: calc(19px * var(--s));
  color: #fff;
}
.app-bar__title {
  font-size: calc(19px * var(--st));
  font-weight: 300;
  flex: 1;
  text-align: center;
  padding-inline: calc(4px * var(--s));
}
.app-bar__grow { flex: 1; }

/* ============ TELA: HOME / MAPA ============ */

.map {
  flex: 1;
  position: relative;
  background: #EFEBE3;
  overflow: hidden;
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.map__circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.map__circle--red {
  background: rgba(229, 57, 53, .58);
  border: calc(3px * var(--s)) solid rgba(229, 57, 53, .78);
}
.map__circle--orange {
  background: rgba(255, 152, 0, .55);
  border: calc(2px * var(--s)) solid rgba(255, 152, 0, .72);
}
.map__circle--purple {
  background: rgba(156, 39, 176, .48);
  border: calc(2px * var(--s)) solid rgba(156, 39, 176, .68);
}
.screen.is-active .map__circle--red { animation: breathe 3.4s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

.map__me {
  position: absolute;
  width: calc(16px * var(--s));
  height: calc(16px * var(--s));
  border-radius: 50%;
  background: #1A73E8;
  border: calc(2.5px * var(--s)) solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 calc(9px * var(--s)) rgba(26, 115, 232, .18);
}

.map__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--s));
  background: rgba(255, 255, 255, .93);
  border: calc(1px * var(--s)) solid rgba(255, 89, 89, .22);
  border-radius: calc(8px * var(--s));
  padding: calc(5px * var(--s)) calc(8px * var(--s));
  font-size: calc(10px * var(--st));
  box-shadow: 0 calc(2px * var(--s)) calc(5px * var(--s)) rgba(0, 0, 0, .12);
}
.map__pill .ic { font-size: calc(12px * var(--s)); color: var(--c-coral); }
.map__pill--city { left: calc(10px * var(--s)); bottom: calc(12px * var(--s)); }

.map__legend {
  position: absolute;
  left: calc(10px * var(--s));
  top: calc(10px * var(--s));
  background: rgba(255, 255, 255, .95);
  border-radius: calc(8px * var(--s));
  padding: calc(8px * var(--s)) calc(10px * var(--s));
  box-shadow: 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, .14);
  font-size: calc(9.5px * var(--st));
}
.map__legend b { display: block; font-size: calc(10px * var(--st)); font-weight: 700; margin-bottom: calc(5px * var(--s)); }
.map__legend div { display: flex; align-items: center; gap: calc(5px * var(--s)); margin-top: calc(3px * var(--s)); color: var(--c-txt2); }
.map__legend i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%; display: block; }

/* Barra inferior com recorte para o botão */
.tabbar {
  flex: none;
  height: calc(78px * var(--s));
  background: var(--c-bege);
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: calc(14px * var(--s));
  box-shadow: 0 calc(-2px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, .06);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3px * var(--s));
  font-size: calc(11px * var(--st));
  color: #2A2321;
}
.tabbar__item .ic { font-size: calc(17px * var(--s)); color: var(--c-coral); }
.tabbar__notch { width: calc(74px * var(--s)); flex: none; }

.fab {
  position: absolute;
  left: 50%;
  top: calc(-28px * var(--s));
  transform: translateX(-50%);
  width: calc(58px * var(--s));
  height: calc(58px * var(--s));
  border-radius: 50%;
  background: var(--c-coral);
  display: grid;
  place-items: center;
  box-shadow: 0 calc(4px * var(--s)) calc(12px * var(--s)) rgba(255, 89, 89, .45);
  border: calc(4px * var(--s)) solid var(--c-bege);
  z-index: 3;
}
.fab img { width: 58%; filter: brightness(0) invert(1); }
.screen.is-active .fab::after {
  content: '';
  position: absolute;
  inset: calc(-4px * var(--s));
  border-radius: 50%;
  border: calc(2px * var(--s)) solid var(--c-coral);
  animation: halo 2.2s ease-out infinite;
}
@keyframes halo {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============ Blocos genéricos ============ */

.body-pad {
  flex: 1;
  padding: calc(18px * var(--s)) calc(18px * var(--s)) calc(22px * var(--s));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.body-pad--center { justify-content: center; }

.t-h1 { font-size: calc(23px * var(--st)); font-weight: 700; line-height: 1.16; text-align: center; }
.t-h2 { font-size: calc(15px * var(--st)); font-weight: 700; }
.t-b  { font-size: calc(12.5px * var(--st)); color: var(--c-txt2); line-height: 1.45; }
.t-c  { font-size: calc(10.5px * var(--st)); color: var(--c-txt3); }
.center { text-align: center; }

.card-w {
  background: var(--c-card);
  border: calc(1px * var(--s)) solid var(--c-divider);
  border-radius: calc(12px * var(--s));
  padding: calc(12px * var(--s));
}

.btn-app {
  border-radius: calc(12px * var(--s));
  padding: calc(13px * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7px * var(--s));
  font-size: calc(14px * var(--st));
  font-weight: 700;
  color: #fff;
  background: var(--c-coral);
}
.btn-app .ic { font-size: calc(17px * var(--s)); }
.btn-app--error { background: var(--c-error); }
.btn-app--ghost { background: transparent; color: var(--c-txt2); font-weight: 400; }

.ring {
  width: calc(96px * var(--s));
  height: calc(96px * var(--s));
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.ring .ic { font-size: calc(50px * var(--s)); }

/* ============ TELA: CADASTRO ============ */

.screen--form { background: var(--c-bege); }
.brandmark { text-align: center; margin-bottom: calc(6px * var(--s)); }
.brandmark img { width: calc(112px * var(--s)); margin: 0 auto; }

.field {
  border-bottom: calc(1.4px * var(--s)) solid var(--c-divider);
  padding: calc(9px * var(--s)) calc(2px * var(--s)) calc(6px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(7px * var(--s));
  font-size: calc(13px * var(--st));
  color: var(--c-txt2);
}
.field .ic { font-size: calc(15px * var(--s)); color: var(--c-txt3); }
.field.is-filled { color: var(--c-txt); }
.field.is-focus { border-bottom-color: var(--c-coral); }
.field.is-focus .ic { color: var(--c-coral); }
.field__label {
  font-size: calc(10px * var(--st));
  color: var(--c-coral);
  display: block;
  margin-bottom: calc(-2px * var(--s));
}
.field__flag { font-size: calc(13px * var(--st)); }
.caret {
  width: calc(1.5px * var(--s));
  height: calc(15px * var(--s));
  background: var(--c-coral);
  display: inline-block;
}
.screen.is-active .caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.callout {
  margin-top: calc(10px * var(--s));
  background: rgba(255, 89, 89, .09);
  border: calc(1px * var(--s)) solid rgba(255, 89, 89, .28);
  border-radius: calc(10px * var(--s));
  padding: calc(9px * var(--s)) calc(10px * var(--s));
  font-size: calc(10.5px * var(--st));
  color: #B3352F;
  display: flex;
  gap: calc(6px * var(--s));
  align-items: flex-start;
  line-height: 1.4;
}
.callout .ic { font-size: calc(13px * var(--s)); flex: none; margin-top: calc(1px * var(--s)); }

/* ============ TELA: ANJOS ============ */

.anjo-counter {
  margin: calc(12px * var(--s));
  padding: calc(13px * var(--s));
  border-radius: calc(12px * var(--s));
  background: linear-gradient(135deg, var(--c-coral), var(--c-coral-dark));
  color: #fff;
  display: flex;
  align-items: center;
  gap: calc(11px * var(--s));
  box-shadow: 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0, 0, 0, .12);
}
.anjo-counter .ic { font-size: calc(28px * var(--s)); }
.anjo-counter small { font-size: calc(11px * var(--st)); opacity: .9; display: block; }
.anjo-counter b { font-size: calc(14px * var(--st)); font-weight: 500; }

.anjo-tile {
  margin: calc(6px * var(--s)) calc(12px * var(--s));
  padding: calc(12px * var(--s));
  background: var(--c-card);
  border: calc(1px * var(--s)) solid rgba(224, 224, 224, .8);
  border-radius: calc(12px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(10px * var(--s));
}
.avatar {
  width: calc(44px * var(--s));
  height: calc(44px * var(--s));
  border-radius: 50%;
  background: var(--c-coral);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(15px * var(--st));
  font-weight: 500;
  flex: none;
}
.anjo-tile__info { flex: 1; min-width: 0; }
.anjo-tile__info b { font-size: calc(13px * var(--st)); font-weight: 600; display: block; }
.anjo-tile__info span { font-size: calc(11.5px * var(--st)); color: var(--c-txt2); }
.anjo-tile__acts { display: flex; gap: calc(5px * var(--s)); }
.act {
  width: calc(28px * var(--s));
  height: calc(28px * var(--s));
  border-radius: calc(8px * var(--s));
  display: grid;
  place-items: center;
  font-size: calc(15px * var(--s));
}
.act--chat { background: rgba(255, 89, 89, .1); color: var(--c-coral); }
.act--call { background: rgba(76, 175, 80, .1); color: var(--c-success); }
.act--more { background: rgba(102, 102, 102, .1); color: var(--c-txt2); }
.act.is-off { background: rgba(102, 102, 102, .08); color: #B7B0AD; }

.badge-pending {
  display: inline-block;
  margin-top: calc(3px * var(--s));
  font-size: calc(9.5px * var(--st));
  font-weight: 500;
  color: var(--c-warning);
  background: rgba(255, 152, 0, .18);
  border: calc(1px * var(--s)) solid rgba(255, 152, 0, .55);
  border-radius: calc(8px * var(--s));
  padding: calc(1px * var(--s)) calc(7px * var(--s));
}

.section-label {
  padding: calc(10px * var(--s)) calc(14px * var(--s)) calc(2px * var(--s));
  font-size: calc(11px * var(--st));
  font-weight: 600;
  color: var(--c-txt2);
}

/* ============ TELA: CONFIRMAR SOS ============ */

.sos-list { display: flex; flex-direction: column; gap: calc(7px * var(--s)); margin-top: calc(8px * var(--s)); }
.sos-row { display: flex; align-items: center; gap: calc(7px * var(--s)); font-size: calc(11.5px * var(--st)); }
.sos-row .ic { font-size: calc(13px * var(--s)); color: var(--c-info); flex: none; }
.mini-avatar {
  width: calc(24px * var(--s)); height: calc(24px * var(--s));
  border-radius: 50%; background: var(--c-coral); color: #fff;
  display: grid; place-items: center; font-size: calc(10px * var(--st));
}
.chip-ok {
  margin-left: auto;
  font-size: calc(9.5px * var(--st));
  font-weight: 600;
  color: var(--c-success);
  background: rgba(76, 175, 80, .12);
  border-radius: calc(6px * var(--s));
  padding: calc(2px * var(--s)) calc(7px * var(--s));
}
.card-info {
  background: rgba(33, 150, 243, .09);
  border: calc(1px * var(--s)) solid rgba(33, 150, 243, .3);
  border-radius: calc(12px * var(--s));
  padding: calc(12px * var(--s));
}
.card-safe {
  background: rgba(76, 175, 80, .1);
  border-radius: calc(12px * var(--s));
  padding: calc(10px * var(--s));
  display: flex;
  gap: calc(7px * var(--s));
  align-items: center;
  font-size: calc(10px * var(--st));
  color: #2E7D46;
  line-height: 1.35;
}
.card-safe .ic { font-size: calc(16px * var(--s)); flex: none; }

/* ============ TELA: DISFARCE ============ */

.screen--cover { background: #FAF7F4; }
.cover {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: calc(52px * var(--s)) calc(12px * var(--s)) 0;
  background: #FAF7F4;
}
.cover__bar {
  height: calc(30px * var(--s));
  border-radius: calc(8px * var(--s));
  background: #EFE9E4;
  display: flex;
  align-items: center;
  padding: 0 calc(9px * var(--s));
  gap: calc(6px * var(--s));
  font-size: calc(11px * var(--st));
  color: #A79E99;
}
.cover__bar .ic { font-size: calc(13px * var(--s)); }
.cover__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(9px * var(--s));
  margin-top: calc(11px * var(--s));
}
.cover__card {
  border-radius: calc(10px * var(--s));
  overflow: hidden;
  background: #fff;
  border: calc(1px * var(--s)) solid #EDE6E1;
}
.cover__thumb { height: calc(52px * var(--s)); background: linear-gradient(135deg, #F6D9CE, #EFC4B6); }
.cover__card:nth-child(2) .cover__thumb { background: linear-gradient(135deg, #D9E4F6, #BFD0EC); }
.cover__card:nth-child(3) .cover__thumb { background: linear-gradient(135deg, #E2F0DC, #C6E2BB); }
.cover__card:nth-child(4) .cover__thumb { background: linear-gradient(135deg, #F5E7C8, #EBD59D); }
.cover__meta { padding: calc(7px * var(--s)); }
.cover__meta i {
  display: block;
  height: calc(6px * var(--s));
  border-radius: 3px;
  background: #EDE6E1;
  margin-bottom: calc(4px * var(--s));
}
.cover__meta i:last-child { width: 55%; margin-bottom: 0; }

.cart {
  position: absolute;
  left: 50%;
  top: 44%;
  font-size: calc(74px * var(--s));
  color: var(--c-coral);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(255, 89, 89, .3));
}
.screen.is-active .cart { animation: cart 1s ease-in-out infinite alternate; }
@keyframes cart {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -78%) rotate(-20deg); }
}

.cover__foot {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(40px * var(--s)) calc(14px * var(--s)) calc(20px * var(--s));
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .38) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cover__x {
  width: calc(38px * var(--s));
  height: calc(38px * var(--s));
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: calc(19px * var(--s));
}
.cover__more {
  background: var(--c-coral);
  color: #fff;
  border-radius: 999px;
  padding: calc(9px * var(--s)) calc(16px * var(--s));
  font-size: calc(12px * var(--st));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--s));
}
.cover__map {
  position: absolute;
  top: calc(52px * var(--s));
  right: calc(12px * var(--s));
  background: rgba(255, 89, 89, .95);
  color: #fff;
  border-radius: calc(16px * var(--s));
  padding: calc(7px * var(--s)) calc(11px * var(--s));
  text-align: center;
  box-shadow: 0 calc(3px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, .3);
}
.cover__map b { display: block; font-size: calc(10.5px * var(--st)); font-weight: 700; }
.cover__map span { font-size: calc(9px * var(--st)); }
.screen.is-active .cover__map { animation: nudge 1s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: scale(1.07); } }

/* ============ TELA: EMERGÊNCIA ATIVA ============ */

.live-head { display: flex; align-items: center; gap: calc(10px * var(--s)); }
.live-head .ic { font-size: calc(27px * var(--s)); color: var(--c-coral); }
.live-head b { font-size: calc(13.5px * var(--st)); font-weight: 700; display: block; }
.live-timer { font-size: calc(12px * var(--st)); font-weight: 600; color: var(--c-txt2); font-variant-numeric: tabular-nums; }

.addr {
  margin-top: calc(10px * var(--s));
  background: rgba(255, 89, 89, .1);
  border-radius: calc(6px * var(--s));
  padding: calc(7px * var(--s)) calc(9px * var(--s));
  display: flex;
  gap: calc(6px * var(--s));
  align-items: center;
  font-size: calc(10.5px * var(--st));
  line-height: 1.3;
}
.addr .ic { font-size: calc(13px * var(--s)); color: var(--c-coral); flex: none; }

.status-row {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--s));
  padding: calc(7px * var(--s)) calc(9px * var(--s));
  background: var(--c-bege);
  border-radius: calc(6px * var(--s));
  margin-bottom: calc(5px * var(--s));
  font-size: calc(11.5px * var(--st));
}
.status-row .ic { font-size: calc(14px * var(--s)); }
.status-row em { margin-left: auto; font-style: normal; font-size: calc(10.5px * var(--st)); font-weight: 600; }
.status-row--off { border: calc(1px * var(--s)) solid rgba(102, 102, 102, .3); color: var(--c-txt2); }
.status-row--off .ic, .status-row--off em { color: var(--c-txt2); }
.status-row--seen { border: calc(1px * var(--s)) solid rgba(255, 152, 0, .35); }
.status-row--seen .ic, .status-row--seen em { color: var(--c-warning); }
.status-row--ok { border: calc(1px * var(--s)) solid rgba(76, 175, 80, .35); }
.status-row--ok .ic, .status-row--ok em { color: var(--c-success); }

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(7px * var(--s));
}
.quick {
  border: calc(1.5px * var(--s)) solid rgba(255, 89, 89, .55);
  background: rgba(255, 89, 89, .09);
  border-radius: calc(8px * var(--s));
  padding: calc(8px * var(--s)) calc(5px * var(--s));
  text-align: center;
  color: var(--c-coral);
  font-size: calc(9.5px * var(--st));
  font-weight: 600;
}
.quick .ic { font-size: calc(17px * var(--s)); margin: 0 auto calc(3px * var(--s)); }

/* ============ TELA: CHAT ============ */

.screen--chat { background: #FCFCFC; }
.chat-head { display: flex; align-items: center; gap: calc(8px * var(--s)); flex: 1; min-width: 0; }
.chat-head b { font-size: calc(13px * var(--st)); font-weight: 500; display: block; }
.chat-head span { font-size: calc(10px * var(--st)); opacity: .85; display: flex; align-items: center; gap: calc(4px * var(--s)); }
.dot-on { width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: var(--c-success); display: block; }

.chat-body {
  flex: 1;
  padding: calc(10px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--s));
  overflow: hidden;
}
.track {
  background: rgba(244, 67, 54, .08);
  border: calc(1.5px * var(--s)) solid var(--c-error);
  border-radius: calc(12px * var(--s));
  padding: calc(9px * var(--s));
  margin-bottom: calc(3px * var(--s));
}
.track b {
  font-size: calc(11px * var(--st));
  color: var(--c-error);
  display: flex;
  align-items: center;
  gap: calc(5px * var(--s));
}
.track b .ic { font-size: calc(13px * var(--s)); }
.track p { font-size: calc(10.5px * var(--st)); margin-top: calc(3px * var(--s)); }
.track small { font-size: calc(9px * var(--st)); color: var(--c-txt3); }
.track .pulse {
  width: calc(7px * var(--s)); height: calc(7px * var(--s));
  border-radius: 50%; background: var(--c-error); display: inline-block;
}
.screen.is-active .track .pulse { animation: blink 1.2s ease-in-out infinite; }

.bubble {
  max-width: 76%;
  padding: calc(8px * var(--s)) calc(10px * var(--s));
  font-size: calc(11.5px * var(--st));
  line-height: 1.35;
  box-shadow: 0 calc(1px * var(--s)) calc(3px * var(--s)) rgba(0, 0, 0, .1);
}
.bubble time {
  display: block;
  text-align: right;
  font-size: calc(8.5px * var(--st));
  color: var(--c-txt3);
  margin-top: calc(2px * var(--s));
}
.bubble--in {
  align-self: flex-start;
  background: #FFFDFD;
  border-radius: calc(16px * var(--s)) calc(16px * var(--s)) calc(16px * var(--s)) calc(4px * var(--s));
}
.bubble--out {
  align-self: flex-end;
  background: var(--c-coral);
  color: #fff;
  border-radius: calc(16px * var(--s)) calc(16px * var(--s)) calc(4px * var(--s)) calc(16px * var(--s));
}
.bubble--out time { color: rgba(255, 255, 255, .8); }
.screen.is-active .bubble { animation: pop .45s both; }
.screen.is-active .bubble:nth-of-type(1) { animation-delay: .25s; }
.screen.is-active .bubble:nth-of-type(2) { animation-delay: .75s; }
.screen.is-active .bubble:nth-of-type(3) { animation-delay: 1.25s; }
@keyframes pop {
  from { opacity: 0; transform: translateY(calc(8px * var(--s))); }
  to { opacity: 1; transform: none; }
}

.chat-input {
  flex: none;
  background: #fff;
  padding: calc(8px * var(--s)) calc(9px * var(--s)) calc(16px * var(--s));
  display: flex;
  align-items: center;
  gap: calc(7px * var(--s));
  box-shadow: 0 calc(-1px * var(--s)) calc(4px * var(--s)) rgba(0, 0, 0, .07);
}
.chat-input__plus {
  width: calc(30px * var(--s)); height: calc(30px * var(--s));
  border-radius: 50%; background: rgba(255, 89, 89, .1);
  color: var(--c-coral); display: grid; place-items: center;
  font-size: calc(16px * var(--s)); flex: none;
}
.chat-input__box {
  flex: 1;
  background: rgba(0, 0, 0, .05);
  border-radius: 999px;
  padding: calc(8px * var(--s)) calc(13px * var(--s));
  font-size: calc(11.5px * var(--st));
  color: var(--c-txt3);
}
.chat-input__send {
  width: calc(32px * var(--s)); height: calc(32px * var(--s));
  border-radius: 50%; background: var(--c-success); color: #fff;
  display: grid; place-items: center; font-size: calc(16px * var(--s)); flex: none;
}

/* ============ TELA: PIN ============ */

.pin-grid { display: flex; justify-content: center; gap: calc(9px * var(--s)); margin: calc(22px * var(--s)) 0; }
.pin-box {
  width: calc(46px * var(--s));
  height: calc(46px * var(--s));
  border-radius: calc(8px * var(--s));
  border: calc(1.5px * var(--s)) solid var(--c-txt2);
  display: grid;
  place-items: center;
  background: transparent;
}
.pin-box i {
  width: calc(11px * var(--s)); height: calc(11px * var(--s));
  border-radius: 50%; background: var(--c-txt); display: block; opacity: 0;
}
.screen.is-active .pin-box { animation: pinfill .3s both; }
.screen.is-active .pin-box i { animation: fadein .3s both; }
.screen.is-active .pin-box:nth-child(1), .screen.is-active .pin-box:nth-child(1) i { animation-delay: .5s; }
.screen.is-active .pin-box:nth-child(2), .screen.is-active .pin-box:nth-child(2) i { animation-delay: .95s; }
.screen.is-active .pin-box:nth-child(3), .screen.is-active .pin-box:nth-child(3) i { animation-delay: 1.4s; }
.screen.is-active .pin-box:nth-child(4), .screen.is-active .pin-box:nth-child(4) i { animation-delay: 1.85s; }
@keyframes pinfill { to { background: var(--c-bege); border-color: var(--c-coral); } }
@keyframes fadein { to { opacity: 1; } }

/* ============ TELA: NICE ============ */

.nice-step {
  display: flex;
  gap: calc(9px * var(--s));
  align-items: flex-start;
  margin-top: calc(9px * var(--s));
}
.nice-step b {
  width: calc(22px * var(--s));
  height: calc(22px * var(--s));
  border-radius: 50%;
  background: var(--c-coral);
  color: #fff;
  font-size: calc(10px * var(--st));
  display: grid;
  place-items: center;
  flex: none;
}
.nice-step p { font-size: calc(10.5px * var(--st)); color: var(--c-txt2); line-height: 1.4; }
.pill-ok {
  background: rgba(76, 175, 80, .12);
  color: #2E7D46;
  border-radius: calc(10px * var(--s));
  padding: calc(10px * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7px * var(--s));
  font-size: calc(12px * var(--st));
  font-weight: 600;
}

/* ---------- Tamanho do aparelho por tela ----------
   Como tudo por dentro deriva de --s, basta trocar esse número. */

@media (max-width: 1279px) { .phone { --s: .74; } }
@media (max-width: 1080px) { .phone { --s: .64; } }
@media (min-width: 901px) and (max-height: 860px) { .phone { --s: .70; } }
@media (min-width: 901px) and (max-height: 780px) { .phone { --s: .62; } }
@media (min-width: 901px) and (max-height: 690px) { .phone { --s: .54; } }

@media (max-width: 900px) { .phone { --s: .42; } }
@media (max-width: 640px) { .phone { --s: .36; } }
@media (max-width: 640px) and (max-height: 780px) { .phone { --s: .32; } }
@media (max-width: 380px) { .phone { --s: .30; } }