{% comment %}
  Smart states: pass state= and optional frozen= for Docs/embedding.
  state: main | settings | account | platform | profile | privacy | chats | notif | storage | tools | devices | preconnect | share-dialog | qr-scan | fb-chat
  frozen: true | false — disables interaction (use in Docs for static preview)
{% endcomment %}
{% case include.state %}
{% when "main", "homescreen", "settings", "account", "platform", "profile", "privacy", "chats", "notif", "storage", "tools", "devices", "preconnect", "share-dialog", "qr-scan", "fb-chat" %}
  {% assign mockup_state = include.state %}
{% else %}
  {% assign mockup_state = "main" %}
{% endcase %}
{% assign mockup_frozen = include.frozen | default: false %}
<div class="wa-mockup{% if mockup_frozen == true or mockup_frozen == 'true' %} wa-mockup--frozen{% endif %}" data-mockup-state="{{ mockup_state }}" data-mockup-os="ios">
<div class="phone ph-i">
  <div class="sb-i"><span class="t">9:41</span><span class="r"><i class="bi bi-reception-4"></i> <i class="bi bi-battery-full"></i></span></div>
  <div class="app-i">

    <!-- MAIN -->
    <div class="view {% if mockup_state == 'main' %}active{% endif %}" id="i-main">
      <div class="inav">
        <div class="top"><span class="ttl">WA Business</span><div class="icons"><i class="bi bi-camera-fill faded"></i><i class="bi bi-plus-circle-fill faded"></i></div></div>
      </div>
      <div class="ibody">
        <div class="iwf-item iwf-item-fb dms-tap" onclick="tapNav(this,'i-fb-chat')" role="button">
          <div class="iwf-av"><i class="bi bi-facebook"></i></div>
          <div class="iwf-body"><div class="wf-fb-name">Facebook Business</div><div class="wf-fb-preview">Connect to the Business Platform</div></div>
          <div class="iwf-meta"><div class="iwf-time">11:03</div><span class="iwf-unread"></span><i class="bi bi-chevron-right iwf-chev"></i></div>
        </div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w4"></div><div class="wf-bar sm w6"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w5"></div><div class="wf-bar sm w3"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w3"></div><div class="wf-bar sm w7"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w6"></div><div class="wf-bar sm w4"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w4"></div><div class="wf-bar sm w5"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w5"></div><div class="wf-bar sm w2"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w3"></div><div class="wf-bar sm w6"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
        <div class="iwf-item"><div class="iwf-av"></div><div class="iwf-body"><div class="wf-bar w6"></div><div class="wf-bar sm w3"></div></div><div class="iwf-meta"><div class="iwf-time"></div><i class="bi bi-chevron-right iwf-chev"></i></div></div>
      </div>
      <div class="itabs">
        <div class="itab faded"><i class="bi bi-arrow-repeat"></i><span>Atualizações</span></div>
        <div class="itab faded"><i class="bi bi-telephone-fill"></i><span>Ligações</span></div>
        <div class="itab faded"><i class="bi bi-shop-window"></i><span>Ferramentas</span></div>
        <div class="itab on"><i class="bi bi-chat-fill"></i><span>Conversas</span></div>
        <div class="itab dms-tap" onclick="tapNav(this,'i-settings')"><i class="bi bi-gear"></i><span>Configurações</span></div>
      </div>
    </div>

    <!-- SETTINGS -->
    <div class="view {% if mockup_state == 'settings' %}active{% endif %}" id="i-settings">
      <div class="inav">
        <button class="back" onclick="iNav('i-main')"><i class="bi bi-chevron-left"></i> Voltar</button>
        <div class="top"><span class="ttl">Configurações</span></div>
        <div class="isearch"><i class="bi bi-search"></i> Pesquisar</div>
      </div>
      <div class="ibody">
        <div class="is-profile faded">
          <img src="/assets/images/mockup-avatar.png" alt="Avatar" style="width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0">
          <div style="flex:1"><div class="is-nm">Comercial Chat Jurídico</div><div class="is-ph">Disponível</div></div>
          <i class="bi bi-qr-code-scan" style="color:var(--ios-lbl);font-size:18px"></i>
        </div>
        <div class="is-grp">
          <div class="is-item faded"><i class="bi bi-person-bounding-box" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Avatar</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-person-lines-fill" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Lista de contas</span><i class="bi bi-chevron-right ch"></i></div>
        </div>
        <div class="is-grp">
          <div class="is-item faded"><i class="bi bi-list-ul" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Listas</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-megaphone" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Mensagens de transmissão</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-star" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Com estrela</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-laptop" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Dispositivos conectados</span><i class="bi bi-chevron-right ch"></i></div>
        </div>
        <div class="is-grp">
          <div class="is-item dms-tap" onclick="tapNav(this,'i-account')"><i class="bi bi-key-fill" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Conta</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-lock-fill" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Privacidade</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-chat-left-text-fill" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Conversas</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-bell-fill" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Notificações</span><i class="bi bi-chevron-right ch"></i></div><div class="is-sep"></div>
          <div class="is-item faded"><i class="bi bi-arrow-down-up" style="font-size:18px;color:var(--ios-blue);width:22px;text-align:center"></i><span class="lb">Armazenamento e dados</span><i class="bi bi-chevron-right ch"></i></div>
        </div>
      </div>
      <div class="itabs">
        <div class="itab faded"><i class="bi bi-arrow-repeat"></i><span>Atualizações</span></div>
        <div class="itab faded"><i class="bi bi-telephone-fill"></i><span>Ligações</span></div>
        <div class="itab faded"><i class="bi bi-shop-window"></i><span>Ferramentas</span></div>
        <div class="itab dms-tap" onclick="tapNav(this,'i-main')"><i class="bi bi-chat-fill"></i><span>Conversas</span></div>
        <div class="itab on"><i class="bi bi-gear"></i><span>Configurações</span></div>
      </div>
    </div>

    <!-- iOS ACCOUNT -->
    <div class="view {% if mockup_state == 'account' %}active{% endif %}" id="i-account">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i></button><div class="ttl">Conta</div></div>
      <div class="isub-body">
        <div class="il-section">Segurança</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Verificação em duas etapas</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Chaves de acesso</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Endereço de e-mail</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
        <div class="il-section">Plataforma</div>
        <div class="il-grp">
          <div class="il-item hl dms-tap" onclick="tapNav(this,'i-platform')"><span class="ll">Plataforma comercial</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
        <div class="il-section">Conta</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Mudar número</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Solicitar dados da conta</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll" style="color:#dc3545">Excluir minha conta</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS PLATFORM (Plataforma conectada) -->
    <div class="view {% if mockup_state == 'platform' %}active{% endif %}" id="i-platform">
      <div class="isub-nav"><button class="back" onclick="iNav('i-account')"><i class="bi bi-chevron-left"></i></button></div>
      <div class="isub-body">
        <div style="padding:16px 16px 8px;font-size:13px;color:var(--ios-lbl)">Plataforma conectada</div>
        <div class="il-grp" style="margin:0 16px;border-radius:12px;overflow:hidden">
          <div class="il-item" style="padding:14px 16px;gap:12px">
            <div style="width:40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0"><img src="/assets/images/logos-chat-juridico/chat-juridico-icon-transparente.svg" alt="Chat Jurídico" style="width:26px;height:26px"></div>
            <div style="flex:1;min-width:0">
              <div style="font-size:16px;font-weight:600;color:var(--ios-text)">Chat Jurídico</div>
              <div style="font-size:12.5px;color:var(--ios-lbl);margin-top:3px;line-height:1.4">Conta da Meta: Chat Jurídico</div>
              <div style="font-size:12.5px;color:var(--ios-lbl);margin-top:1px">Conta do WhatsApp: Comercial Chat Jurídico</div>
            </div>
          </div>
        </div>
        <div style="padding:10px 16px 0;font-size:13px;color:var(--ios-lbl)">Toque para desconectar</div>
        <div style="padding:16px 16px 0;font-size:13px;color:var(--ios-lbl);line-height:1.5">
          <p style="margin:0 0 16px">Sua conta do WhatsApp só pode estar conectada a uma conta da Plataforma comercial por vez. Se você desconectar sua conta do Chat Jurídico, não terá acesso aos recursos da plataforma. O app WhatsApp Business não será afetado. <a href="#" style="color:var(--wa3);font-weight:500;text-decoration:none">Saiba mais</a></p>
          <p style="margin:0">Acesse o app pelo menos uma vez a cada 14 dias para não perder a conexão. <a href="#" style="color:var(--wa3);font-weight:500;text-decoration:none">Saiba mais</a></p>
        </div>
      </div>
    </div>

    <!-- iOS PROFILE -->
    <div class="view {% if mockup_state == 'profile' %}active{% endif %}" id="i-profile">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Perfil</div></div>
      <div class="isub-body">
        <div style="display:flex;flex-direction:column;align-items:center;padding:20px">
          <img src="/assets/images/mockup-avatar.png" alt="Avatar" style="width:96px;height:96px;border-radius:50%;object-fit:cover">
        </div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Nome</span><span class="lv">Comercial Chat Jurídico</span></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Recado</span><span class="lv">Atendimento com IA jurídica</span></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Telefone</span><span class="lv">+55 12 99137-5795</span></div>
        </div>
      </div>
    </div>

    <!-- iOS PRIVACY -->
    <div class="view {% if mockup_state == 'privacy' %}active{% endif %}" id="i-privacy">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Privacidade</div></div>
      <div class="isub-body">
        <div class="il-section">Quem pode ver</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Visto por último e online</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Foto do perfil</span><span class="lv">Todos</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Recado</span><span class="lv">Todos</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Grupos</span><span class="lv">Todos</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Confirmações de leitura</span><div style="width:36px;height:20px;border-radius:10px;background:var(--wa3)"></div></div>
        </div>
        <div class="il-section">Avançado</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Bloqueados</span><span class="lv">0</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Bloqueio do app</span><span class="lv">Desativado</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS CHATS -->
    <div class="view {% if mockup_state == 'chats' %}active{% endif %}" id="i-chats">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Conversas</div></div>
      <div class="isub-body">
        <div class="il-section">Exibição</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Tema</span><span class="lv">Escuro</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Papel de parede</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
        <div class="il-section">Histórico</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Backup de conversas</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Exportar conversas</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS NOTIFICATIONS -->
    <div class="view {% if mockup_state == 'notif' %}active{% endif %}" id="i-notif">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Notificações</div></div>
      <div class="isub-body">
        <div class="il-section">Mensagens</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Mostrar notificações</span><div style="width:36px;height:20px;border-radius:10px;background:var(--wa3)"></div></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Som</span><span class="lv">Padrão</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
        <div class="il-section">Grupos</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Mostrar notificações</span><div style="width:36px;height:20px;border-radius:10px;background:var(--wa3)"></div></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Som</span><span class="lv">Padrão</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS STORAGE -->
    <div class="view {% if mockup_state == 'storage' %}active{% endif %}" id="i-storage">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Armazenamento</div></div>
      <div class="isub-body">
        <div class="il-grp" style="margin-top:8px">
          <div class="il-item"><span class="ll">Gerenciar armazenamento</span><span class="lv">1,2 GB</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Uso de rede</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
        <div class="il-section">Download automático</div>
        <div class="il-grp">
          <div class="il-item"><span class="ll">Fotos</span><span class="lv">Wi-Fi</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Áudio</span><span class="lv">Wi-Fi</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Vídeos</span><span class="lv">Nunca</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item"><span class="ll">Documentos</span><span class="lv">Wi-Fi</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS TOOLS -->
    <div class="view {% if mockup_state == 'tools' %}active{% endif %}" id="i-tools">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Ferramentas comerciais</div></div>
      <div class="isub-body">
        <div class="il-grp" style="margin-top:8px">
          <div class="il-item"><i class="bi bi-person-badge-fill lic"></i><span class="ll">Perfil comercial</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-journal-richtext lic"></i><span class="ll">Catálogo</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-reply-all-fill lic"></i><span class="ll">Respostas rápidas</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-hand-thumbs-up-fill lic"></i><span class="ll">Mensagem de saudação</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-clock-history lic"></i><span class="ll">Mensagem de ausência</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-tag-fill lic"></i><span class="ll">Rótulos</span><i class="bi bi-chevron-right lch"></i></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-link-45deg lic"></i><span class="ll">Link curto</span><i class="bi bi-chevron-right lch"></i></div>
        </div>
      </div>
    </div>

    <!-- iOS DEVICES -->
    <div class="view {% if mockup_state == 'devices' %}active{% endif %}" id="i-devices">
      <div class="isub-nav"><button class="back" onclick="iNav('i-settings')"><i class="bi bi-chevron-left"></i> Configurações</button><div class="ttl">Dispositivos</div></div>
      <div class="isub-body">
        <div style="padding:20px 16px;text-align:center">
          <i class="bi bi-laptop" style="font-size:44px;color:var(--ios-lbl);display:block;margin-bottom:8px"></i>
          <div style="font-size:13px;color:var(--ios-lbl);line-height:1.5">Use o WhatsApp em até 4 dispositivos ao mesmo tempo.</div>
        </div>
        <div class="il-grp">
          <div class="il-item"><i class="bi bi-globe lic"></i><span class="ll">Chrome (Windows)</span><span class="lv">Ativo agora</span></div><div class="il-sep"></div>
          <div class="il-item"><i class="bi bi-apple lic"></i><span class="ll">Safari (Mac)</span><span class="lv">Ontem</span></div>
        </div>
      </div>
    </div>

    <!-- iOS PRE-CONNECT -->
    <div class="view {% if mockup_state == 'preconnect' %}active{% endif %}" id="i-preconnect">
      <div class="isub-nav"><button class="back" onclick="iNav('i-account')"><i class="bi bi-chevron-left"></i> Conta</button><div class="ttl">Plataforma comercial</div></div>
      <div class="isub-body" style="display:flex;flex-direction:column">
        <div class="precon" style="--a-text:var(--ios-text);--a-text2:var(--ios-lbl);--a-icon:var(--ios-lbl)">
          <div class="precon-illust"><img src="/assets/images/mockup-platform-illust.png" alt="Plataforma comercial" style="width:100px;height:auto"></div>
          <h3 style="color:var(--ios-text)">Conectar-se à Plataforma do WhatsApp Business</h3>
          <div class="precon-sub">Escaneie o QR code para se conectar à Plataforma comercial.</div>
          <div class="precon-info">
            <div class="precon-row"><i class="bi bi-link-45deg"></i><p>Você pode continuar a usar o app WhatsApp Business junto com a Plataforma comercial.</p></div>
            <div class="precon-row"><i class="bi bi-chat-square-text"></i><p>Você poderá compartilhar até seis meses do histórico de conversas. Não é possível compartilhar históricos de grupos.</p></div>
            <div class="precon-row"><i class="bi bi-info-circle"></i><p>Para oferecer esse serviço, todas as conversas com clientes serão gerenciadas usando um serviço seguro da Meta. <a href="#">Saiba mais</a></p></div>
          </div>
          <button class="precon-cta dms-tap" onclick="tapNav(this,'i-share-dialog')">Conectar-se à Plataforma do WhatsApp Business</button>
        </div>
      </div>
    </div>

    <!-- iOS SHARE DIALOG -->
    <div class="view {% if mockup_state == 'share-dialog' %}active{% endif %}" id="i-share-dialog">
      <div class="isub-nav"><button class="back" onclick="iNav('i-preconnect')"><i class="bi bi-chevron-left"></i> Voltar</button><div class="ttl">Compartilhar</div></div>
      <div class="isub-body">
        <!-- iOS-native share history screen -->
        <div class="ios-share-hero">
          <div class="ios-share-icon"><i class="bi bi-chat-square-text-fill"></i></div>
          <h3 class="ios-share-title">Deseja compartilhar o histórico de conversas?</h3>
          <p class="ios-share-desc">Essa medida ajuda a garantir que suas mensagens anteriores serão exibidas na plataforma comercial.</p>
        </div>
        <div class="il-grp" style="margin:0 16px;border-radius:12px;overflow:hidden">
          <div class="il-item ios-radio-item selected" onclick="iosRadioSelect(this)">
            <div style="flex:1;min-width:0">
              <div class="ll">Compartilhar todas as conversas</div>
              <div style="font-size:12px;color:var(--ios-lbl);margin-top:2px">Continuar conversas com clientes atuais</div>
            </div>
            <i class="bi ios-radio-check"></i>
          </div>
          <div class="il-sep" style="margin-left:16px"></div>
          <div class="il-item ios-radio-item" onclick="iosRadioSelect(this)">
            <div style="flex:1;min-width:0">
              <div class="ll">Não compartilhar conversas</div>
              <div style="font-size:12px;color:var(--ios-lbl);margin-top:2px">Será necessário iniciar novas conversas com seus clientes</div>
            </div>
            <i class="bi ios-radio-check"></i>
          </div>
        </div>
        <div style="padding:16px">
          <button class="ios-share-cta dms-tap" onclick="tapNav(this,'i-qr-scan')">Confirmar</button>
        </div>
      </div>
    </div>

    <!-- iOS QR SCAN -->
    <div class="view {% if mockup_state == 'qr-scan' %}active{% endif %}" id="i-qr-scan">
      <div class="isub-nav"><button class="back" onclick="iNav('i-share-dialog')"><i class="bi bi-chevron-left"></i> Voltar</button><div class="ttl">Escanear código</div></div>
      <div class="isub-body" style="display:flex;flex-direction:column">
        <div class="qr-scan-screen">
          <div class="qr-viewfinder">
            <div class="qr-frame">
              <div class="qr-corner qr-tl"></div>
              <div class="qr-corner qr-tr"></div>
              <div class="qr-corner qr-bl"></div>
              <div class="qr-corner qr-br"></div>
              <div class="qr-scan-line"></div>
            </div>
          </div>
          <div class="qr-instruction">Aponte a câmera para o QR Code<br>exibido na tela do computador</div>
          <button class="qr-done-btn dms-tap" onclick="tapNav(this,'i-platform')"><i class="bi bi-check-circle-fill"></i> Código escaneado</button>
        </div>
      </div>
    </div>

    <!-- iOS FACEBOOK BUSINESS CHAT -->
    <div class="view {% if mockup_state == 'fb-chat' %}active{% endif %}" id="i-fb-chat">
      <div class="fb-chat-hdr" style="background:var(--ios-card)">
        <button class="back" onclick="iNav('i-main')" style="color:var(--ios-blue)"><i class="bi bi-chevron-left"></i> <span style="font-size:14px">5</span></button>
        <div class="fb-av-fb"><i class="bi bi-facebook"></i></div>
        <div style="flex:1">
          <div class="fb-chat-name" style="color:var(--ios-text)">Facebook Business <i class="bi bi-patch-check-fill" style="color:#0095F6;font-size:12px"></i></div>
          <div class="fb-chat-sub" style="color:var(--ios-lbl)">Conta comercial</div>
        </div>
      </div>
      <div class="fb-chat-body">
        <div class="fb-date-sep"><span>Hoje</span></div>
        <div class="fb-bubble" style="background:var(--ios-card)">
          <div class="fb-b-title" style="color:var(--ios-text)">Connect to the Business Platform</div>
          <div class="fb-b-text" style="color:var(--ios-lbl)">Continue the process of sharing your WhatsApp contacts and chats to the Platform.</div>
          <div class="fb-b-time" style="color:var(--ios-lbl)">11:03</div>
          <div class="fb-b-link dms-tap" style="border-color:var(--ios-sep)" onclick="tapNav(this,'i-preconnect')"><i class="bi bi-box-arrow-up-right"></i> Connect</div>
        </div>
      </div>
      <div class="fb-input-bar" style="background:var(--ios-bg)">
        <i class="bi bi-plus fb-plus" style="color:var(--ios-lbl)"></i>
        <div class="fb-input" style="background:var(--ios-card);color:var(--ios-lbl)">Mensagem</div>
        <div class="fb-mic"><i class="bi bi-camera" style="color:var(--ios-lbl)"></i><i class="bi bi-mic" style="color:var(--ios-lbl)"></i></div>
      </div>
    </div>

    <!-- iOS HOME SCREEN -->
    <div class="view {% if mockup_state == 'homescreen' %}active{% endif %}" id="i-homescreen">
      <div class="hs-screen">
        <div class="hs-date">
          <div class="hs-date-day">Sábado, 7 de fevereiro</div>
          <div class="hs-date-time">9:41</div>
        </div>
        <div class="hs-guidance">
          <i class="bi bi-hand-index-thumb"></i>
          <div>
            <div class="hs-guidance-title">Fique com o celular em mãos</div>
            <div class="hs-guidance-sub">As etapas 1 e 2 acontecem no computador</div>
          </div>
        </div>
        <div class="hs-grid">
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:28px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:32px"></div></div>
          <div class="hs-app hs-app-wa dms-tap" onclick="tapNav(this,'i-main')">
            <div class="hs-icon-wa"><img src="/assets/images/icons/whatsapp-business-icon.png" alt="WhatsApp Business" /></div>
            <div class="hs-lbl-wa">WA Business</div>
          </div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:24px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:30px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:36px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:22px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:34px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:26px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:38px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:20px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:30px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:34px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:28px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:24px"></div></div>
          <div class="hs-app"><div class="hs-icon-skel"></div><div class="hs-lbl-skel" style="width:32px"></div></div>
        </div>
        <div class="hs-dots">
          <div class="hs-dot active"></div>
          <div class="hs-dot"></div>
          <div class="hs-dot"></div>
        </div>
        <div class="hs-dock">
          <div class="hs-dock-icon"></div>
          <div class="hs-dock-icon"></div>
          <div class="hs-dock-icon"></div>
          <div class="hs-dock-icon"></div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>