/* ==========================================================================
   CANAIS (#como): botoes WhatsApp / Telegram / Instagram abaixo da lista de
   passos, e as 3 variacoes do mockup do celular (uma por canal). Arquivo
   proprio, isolado dos arquivos compartilhados (styles.css, sections.css).
   Geometria dos blocos dentro do celular calculada em cima da MESMA foto
   usada no mockup do WhatsApp (moldura + status bar 09:41 reaproveitados),
   pra Telegram e Instagram usarem o frame "vazio" (como-mockup-bare.webp).
   ========================================================================== */

/* Inset da "tela" do celular (Telegram/Instagram), medido pixel a pixel em
   como-mockup.webp (820x1533) com script Python/PIL: esquerda/direita
   80px e 740px (9.76%), topo 118px (7.7%, logo abaixo da status bar/ilha
   dinamica), fundo 1450px (5.42%, ainda dentro da borda preta grossa, antes
   da curva do vidro). Custom properties centralizadas aqui de proposito: se
   um dia a foto do mockup for trocada/redimensionada, e so recalcular estes
   6 valores num lugar so (eles tem que continuar batendo com o retangulo
   transparente de como-mockup-bare.webp E com o header/footer do WhatsApp
   em .wa-body, la em styles.css, senao desalinha silenciosamente). */
:root {
  --ch-frame-l: 9.76%;
  --ch-frame-r: 9.76%;
  --ch-frame-t: 7.7%;
  --ch-frame-b: 5.42%;
}

/* ---------- botoes de canal ---------- */
.ch-switch {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
}
.ch-btn {
  flex: none; width: 52px; height: 52px; padding: 0;
  border-radius: 16px; border: 2px solid transparent;
  background: rgba(255, 255, 255, .04);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: .5; filter: grayscale(.25);
  transform: scale(.94);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
}
.ch-btn img { width: 30px; height: 30px; display: block; pointer-events: none; }
.ch-btn:hover { opacity: .8; filter: none; }
.ch-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.ch-btn.is-active {
  opacity: 1; filter: none; transform: scale(1);
  border-color: var(--pink);
  background: rgba(196, 255, 0, .12);
  box-shadow: 0 0 0 4px rgba(196, 255, 0, .10);
}

/* ---------- painel do celular: 3 telas empilhadas ---------- */
.sc-phone.ch-mount { aspect-ratio: 820 / 1533; }
.sc-phone.ch-mount .mockup-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-panel {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(8px) scale(.995);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.ch-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .ch-panel { transition: none; }
}

/* A moldura (foto) do Telegram/Instagram fica TRANSPARENTE numa area maior
   (cabecalho + chat + rodape), diferente do WhatsApp onde so o chat e
   transparente. Por isso o cabecalho/rodape desenhados aqui em HTML/CSS
   precisam ficar SEMPRE por baixo da moldura + ilha dinamica (z-index maior
   na propria foto, so nestes 2 paineis) e com os cantos recortados
   (overflow:hidden + border-radius no wrapper .chtg-screen/.chig-screen),
   senao o fundo escuro do cabecalho vaza por cima do aro prateado do
   celular nas bordas/cantos. O WhatsApp (foto unica, tudo baked) nao usa
   nada disso e continua exatamente como estava. */
.ch-panel[data-channel="telegram"] .mockup-img,
.ch-panel[data-channel="instagram"] .mockup-img {
  z-index: 3;
}
/* BUG: .chtg-screen/.chig-screen ganhou z-index:1 (acima) pra resolver o
   vazamento na moldura, e isso criou um contexto de empilhamento proprio que
   passou a pintar por cima do .wa-body (bolhas), que ficava com z-index:auto
   (nivel "0" implicito). Resultado: as bolhas ficavam escondidas atras do
   papel de parede opaco (conversa parecia vazia, so cabecalho/rodape
   visiveis). Fix: .wa-body entra no meio da pilha (2), acima do wallpaper/
   cabecalho/rodape (1) e abaixo da moldura+ilha dinamica (3). So nos 2
   paineis novos; o WhatsApp nao usa nenhum z-index (continua como sempre). */
.ch-panel[data-channel="telegram"] .wa-body,
.ch-panel[data-channel="instagram"] .wa-body {
  z-index: 2;
}

/* wrapper da "tela" (cabecalho + papel de parede + rodape) do Telegram/
   Instagram: inset medido pixel a pixel na propria foto (como-mockup.webp,
   820x1533): esquerda/direita 9.76% (x:80-740), topo 7.7% (y:118, logo
   abaixo da status bar), fundo 5.42% (y:1450, ainda dentro da borda preta
   grossa, antes da curva do vidro comecar). overflow:hidden + cantos
   arredondados pra nunca desenhar por cima do aro prateado, mesmo com
   pequena imprecisao de pixel (a moldura por cima, via z-index, cobre
   qualquer sobra). */
.chtg-screen, .chig-screen {
  position: absolute;
  left: var(--ch-frame-l); right: var(--ch-frame-r);
  top: var(--ch-frame-t); bottom: var(--ch-frame-b);
  overflow: hidden; border-radius: 10cqw 10cqw 13cqw 13cqw;
  z-index: 1;
}
.chtg-screen { background: #0e1621; }
.chtg-screen::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 12%, rgba(255,255,255,.04) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 48%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 58%, rgba(255,255,255,.04) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 74%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 86%, rgba(255,255,255,.04) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 92%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size: 120px 120px;
}
.chig-screen { background: #060606; }

/* ---------- cabecalho Telegram ---------- */
/* header/footer agora sao filhos de .chtg-screen/.chig-screen (ver acima):
   posicionados com left/right/top/bottom = 0 relativos ao proprio wrapper
   (que ja tem o inset+overflow:hidden certo), sem precisar repetir % da
   moldura nem border-radius proprio (o wrapper que recorta os cantos). */
.chtg-header {
  position: absolute; left: 0; right: 0; top: 0; height: 9.2%;
  display: flex; align-items: center; gap: 2.6cqw;
  background: #17212b; padding: 0 3cqw;
}
.chtg-back { flex: none; width: 4.6cqw; height: 4.6cqw; color: #6ab7ff; }
.chtg-back svg { width: 100%; height: 100%; }
.chtg-avatar {
  flex: none; width: 6.6cqw; height: 6.6cqw; border-radius: 50%;
  background: var(--grad); color: #101300;
  display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 2.9cqw;
}
.chtg-title { display: flex; flex-direction: column; min-width: 0; gap: .2cqw; }
.chtg-title b { color: #e9edef; font-size: 3.05cqw; font-weight: 700; line-height: 1.1; }
.chtg-title i { color: #6ab7ff; font-size: 2.3cqw; font-style: normal; line-height: 1.1; }

/* ---------- cabecalho Instagram ---------- */
.chig-header {
  position: absolute; left: 0; right: 0; top: 0; height: 9.2%;
  display: flex; align-items: center; gap: 2.6cqw;
  background: #050505; padding: 0 3cqw;
}
.chig-back { flex: none; width: 4.6cqw; height: 4.6cqw; color: #f5f5f5; }
.chig-back svg { width: 100%; height: 100%; }
.chig-avatar {
  flex: none; width: 6.6cqw; height: 6.6cqw; border-radius: 50%;
  background: var(--grad); color: #101300;
  display: grid; place-items: center;
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 2.9cqw;
}
.chig-title { display: flex; flex-direction: column; min-width: 0; gap: .2cqw; flex: 1 1 auto; }
.chig-title b { color: #f5f5f5; font-size: 3.05cqw; font-weight: 700; line-height: 1.1; }
.chig-title i { color: #a8a8a8; font-size: 2.15cqw; font-style: normal; line-height: 1.1; }
.chig-actions { flex: none; display: flex; align-items: center; gap: 2.4cqw; color: #f5f5f5; }
.chig-actions svg { width: 4cqw; height: 4cqw; display: block; }

/* ---------- rodape Telegram (barra de digitar) ---------- */
.chtg-footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8.3%;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 0 2.6cqw;
}
.chtg-ic { flex: none; width: 4.4cqw; height: 4.4cqw; color: #7c96ab; }
.chtg-ic svg { width: 100%; height: 100%; }
.chtg-input {
  flex: 1 1 auto; min-width: 0; height: 68%; border-radius: 999px;
  background: #182533; color: #7c96ab; display: flex; align-items: center;
  padding: 0 3cqw; font-family: "Inter", sans-serif; font-size: 2.9cqw;
}
.chtg-mic { color: #6ab7ff; }

/* ---------- rodape Instagram (barra "Mensagem...") ---------- */
.chig-footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8.3%;
  display: flex; align-items: center; gap: 2.2cqw;
  padding: 0 2.6cqw;
}
.chig-ic { flex: none; width: 4.2cqw; height: 4.2cqw; color: #f5f5f5; }
.chig-ic svg { width: 100%; height: 100%; }
.chig-input {
  flex: 1 1 auto; min-width: 0; height: 68%; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); color: #a8a8a8; display: flex; align-items: center;
  padding: 0 3cqw; font-family: "Inter", sans-serif; font-size: 2.9cqw;
}

/* ---------- bolhas Telegram ---------- */
.bub.chtg-in, .bub.chtg-out { border-radius: 3.6cqw; }
.bub.chtg-in { background: #182533; color: #e9edef; align-self: flex-start; }
.bub.chtg-out { background: #2b5278; color: #ffffff; align-self: flex-end; }

/* teclado inline (equivalente aos botoes do bot no Telegram) */
.chtg-kb {
  display: flex; flex-direction: column; margin-top: 1%; flex-shrink: 0;
  background: #182533; border-radius: 0 8px 8px 8px; overflow: hidden;
}
.chtg-kbtn {
  text-align: left; background: transparent; color: #6ab7ff; font-weight: 600;
  font-size: 3.2cqw; padding: 2.6% 4%; border-top: 1px solid rgba(255,255,255,.08);
  font-family: "Inter", sans-serif;
}
.chtg-kbtn:first-child { border-top: 0; }
.chtg-kbtn--primary { color: #74e0a4; }

/* ---------- bolhas Instagram ---------- */
.bub.chig-in, .bub.chig-out { border-radius: 4.4cqw; }
.bub.chig-in { background: #262626; color: #f5f5f5; align-self: flex-start; }
.bub.chig-out { background: linear-gradient(135deg, #4a5cf5, #8b3df0); color: #ffffff; align-self: flex-end; }

.wa-sys.chig-sys { background: transparent; box-shadow: none; padding: 0; color: #a8a8a8; }

/* quick replies (chips) do Instagram */
.chig-quick { display: flex; flex-wrap: wrap; gap: 1.6%; margin-top: 1%; align-self: flex-start; max-width: 100%; flex-shrink: 0; }
.chig-chip {
  border: 1px solid rgba(255,255,255,.35); color: #e6e6e6; border-radius: 999px;
  padding: 1.6% 3.4%; font-size: 3cqw; font-family: "Inter", sans-serif; font-weight: 600;
  white-space: nowrap;
}
.chig-chip--primary { border-color: transparent; background: linear-gradient(135deg, #4a5cf5, #8b3df0); color: #fff; }

@media (max-width: 380px) {
  .ch-switch { gap: 8px; }
  .ch-btn { width: 46px; height: 46px; }
  .ch-btn img { width: 26px; height: 26px; }
}