/*
 * A faixa de instalar o app (DEC-046, escolha 5 A do Kayo, 24/10/2026): embaixo,
 * na cor escura da casa, com a logo, o recado, o "Instalar" cheio na cor de
 * ação e o X. Fica abaixo das gavetas (elas cobrem a faixa). Onde já há algo
 * preso embaixo (o menu do corretor, a barra do link, a gaveta do login no
 * /equipe), sobe e fica colada em cima, a 16 px (--ins-under, medido pelo
 * install.js), como no Barber. O fim da página não fica atrás dela (--ins-h).
 */
.ins { position: fixed; z-index: 55; left: 0; right: 0; bottom: calc(16px + max(var(--ins-under, 0px), env(safe-area-inset-bottom, 0px))); width: min(496px, calc(100% - 24px)); margin: 0 auto; background: var(--t-deep, #0a2a42); border-radius: 18px; padding: 14px 12px 14px 14px; display: flex; align-items: center; gap: 12px; color: #fff; font-family: inherit; }
.ins[hidden], .ins-sheet[hidden] { display: none; }
/* Com uma gaveta aberta (a senha, o "Mais"), a faixa sai da frente. */
body.sheet-open .ins { display: none; }
.ins-logo { width: 48px; height: 48px; border-radius: 12px; background: var(--t-logo-bg, #fc7a00); color: var(--t-logo-fg, #fff); display: grid; place-items: center; flex: none; overflow: hidden; }
.ins-logo.has-img { background: #fff; }
.ins-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-logo svg { width: 58%; height: 58%; fill: currentColor; }
.ins-logo b { font: var(--t-ds, normal) var(--t-dw, 800) 15px/1 var(--t-display, sans-serif); }
.ins-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-text b { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.25; }
.ins-text small { font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .82); line-height: 1.35; }
.ins-go { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--t-action, #fc7a00); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; flex: none; }
.ins-x { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(255 255 255 / .82); display: grid; place-items: center; cursor: pointer; flex: none; }
.ins-x svg, .ins-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* O fim da página não fica atrás da faixa; a seta de descer sobe acima dela (panel.js e client.js). */
body.ins-on .c-body, body.ins-on .s-main, body.ins-on .p-body { padding-bottom: var(--ins-h, 0px); }

/* O passo a passo do iPhone: a gaveta que sobe de baixo, com a página de trás parada. */
.ins-bg { position: fixed; inset: 0; z-index: 79; background: rgb(10 16 22 / .55); }
body.ins-open { overflow: hidden; }
body.ins-open .scroll-page, body.ins-open .scroll-side { display: none; }
.ins-sheet { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; background: #fff; color: var(--t-ink, #1d2430); border-radius: 24px 24px 0 0; padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; font-family: inherit; }
.ins-top { display: flex; align-items: center; gap: 12px; }
.ins-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-top h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--t-deep, #0a2a42); }
.ins-top small { font-size: 13px; color: var(--t-soft, #5b6573); }
.ins-close { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--t-panel, #eef1f4); color: var(--t-ink, #1d2430); display: grid; place-items: center; cursor: pointer; flex: none; }
.ins-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ins-steps li { display: flex; align-items: center; gap: 12px; background: var(--t-tint, #f1f5f8); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.35; }
.ins-steps li > span:nth-child(2) { flex: 1; min-width: 0; }
.ins-n { width: 28px; height: 28px; border-radius: 50%; background: var(--t-action, #fc7a00); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none; }
.ins-steps svg { width: 26px; height: 26px; fill: none; stroke: var(--t-deep, #0a2a42); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ins-note { margin: 0; font-size: 12px; color: var(--t-soft, #5b6573); text-align: center; }
.ins-ok { height: 52px; border: 0; border-radius: 12px; background: var(--t-action, #fc7a00); color: #fff; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }