/*
 * Ajustes exclusivos para o navegador interno do Instagram.
 * A classe .instagram-webview e aplicada em includes/header.php pela UA do app.
 * Navegadores comuns, PWA instalada e desktop nao recebem estas regras.
 */

html.instagram-webview,
html.instagram-webview body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

@media (max-width: 899px) {
  html.instagram-webview,
  html.instagram-webview body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #f6f3fc !important;
  }

  html.instagram-webview body *,
  html.instagram-webview body *::before,
  html.instagram-webview body *::after {
    box-sizing: border-box !important;
  }

  html.instagram-webview body:not(.auth-body) .app-shell {
    width: 100% !important;
    max-width: 480px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    background: #f6f3fc !important;
  }

  /* O WebView do Instagram nao instala PWA; o aviso apenas cobria o conteudo. */
  html.instagram-webview body .pwa-install-wrap,
  html.instagram-webview body .pwa-install-toast,
  html.instagram-webview body .pwa-help-layer,
  html.instagram-webview body .deejai-pwa-install-mini,
  html.instagram-webview body [data-pwa-install],
  html.instagram-webview body [data-install-pwa] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Mantem a barra inferior no mesmo tema claro do app e sem o roxo legado. */
  html.instagram-webview body:not(.auth-body) .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    width: 100% !important;
    max-width: 480px !important;
    min-height: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 74px 1fr 1fr !important;
    grid-template-rows: 76px auto !important;
    align-items: end !important;
    gap: 4px !important;
    row-gap: 2px !important;
    margin: 0 !important;
    padding: 4px 8px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid #d4e1eb !important;
    border-radius: 0 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 -7px 20px rgba(43, 79, 106, .10) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    isolation: isolate !important;
    z-index: 2147483647 !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav::before {
    display: none !important;
    content: none !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-item {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 7px 3px 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #6f7f89 !important;
    -webkit-text-fill-color: #6f7f89 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-item.active {
    background: #eef6fc !important;
    color: #2f87b9 !important;
    -webkit-text-fill-color: #2f87b9 !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-item .ico,
  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-item .ico svg {
    width: 24px !important;
    height: 24px !important;
    color: currentColor !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-item b {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-create-clean,
  html.instagram-webview body:not(.auth-body) .bottom-nav > button#quickMenuOpen {
    height: 76px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .nav-create-clean .nav-plus,
  html.instagram-webview body:not(.auth-body) .bottom-nav > button#quickMenuOpen .nav-plus {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    margin: -18px auto 0 !important;
    border: 1px solid #d94857 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #e36bb4 0%, #ce5aa6 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 10px 24px rgba(201, 76, 155, .30) !important;
    font-size: 38px !important;
    line-height: 1 !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .app-signature {
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 8px 0 !important;
    background: transparent !important;
  }

  html.instagram-webview body:not(.auth-body) .bottom-nav > .app-signature p,
  html.instagram-webview body:not(.auth-body) .bottom-nav > .app-signature strong {
    margin: 0 !important;
    color: #7a8790 !important;
    -webkit-text-fill-color: #7a8790 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
  }

  /* Normalizacao das larguras e tipografia que o WebView costuma ampliar. */
  html.instagram-webview body:not(.auth-body) .container,
  html.instagram-webview body.page-perfil .container.profile-page {
    width: 100% !important;
    max-width: 480px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
    overflow: visible !important;
  }

  html.instagram-webview body.page-perfil .profile-head.profile-head-modern {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html.instagram-webview body.page-perfil .profile-main-name {
    margin: 14px 0 4px !important;
    padding: 0 8px !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: -.6px !important;
    text-align: center !important;
  }

  html.instagram-webview body.page-perfil .profile-head .user,
  html.instagram-webview body.page-perfil .profile-head .profile-verified {
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html.instagram-webview body.page-perfil .profile-head .profile-bio {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  html.instagram-webview body.page-perfil .profile-action-tabs,
  html.instagram-webview body.page-perfil .row-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.instagram-webview body.page-perfil .profile-action-tabs a,
  html.instagram-webview body.page-perfil .row-actions > .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html.instagram-webview body.page-perfil .section-head {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  html.instagram-webview body.page-perfil .section-head .section-title {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  /* Cards do feed com borda, respiro e conteudo contido. */
  html.instagram-webview body:not(.auth-body) .feed-card,
  html.instagram-webview body.page-perfil .profile-unified-feed.home-feed-list > .feed-card,
  html.instagram-webview body.page-perfil .card,
  html.instagram-webview body.page-perfil .form-card,
  html.instagram-webview body.page-perfil .recado-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 14px !important;
    border: 1px solid #c9d9e6 !important;
    border-radius: 18px !important;
    background: #fff !important;
    background-image: none !important;
    color: #4b4b4b !important;
    box-shadow: 0 4px 13px rgba(45, 83, 111, .09) !important;
  }

  html.instagram-webview body.page-perfil .profile-unified-feed.home-feed-list > .feed-card {
    margin-bottom: 14px !important;
  }

  html.instagram-webview body:not(.auth-body) .post-meta {
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
  }

  html.instagram-webview body:not(.auth-body) .mini-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }

  html.instagram-webview body:not(.auth-body) .feed-author-text,
  html.instagram-webview body:not(.auth-body) .feed-author-line {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.instagram-webview body:not(.auth-body) .feed-author-line b {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html.instagram-webview body:not(.auth-body) .post-meta .muted {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html.instagram-webview body:not(.auth-body) .feed-card .message,
  html.instagram-webview body:not(.auth-body) .feed-card .feed-photo-caption,
  html.instagram-webview body:not(.auth-body) .feed-card .feed-title,
  html.instagram-webview body:not(.auth-body) .feed-card p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  html.instagram-webview body:not(.auth-body) .feed-card img,
  html.instagram-webview body:not(.auth-body) .feed-card video,
  html.instagram-webview body:not(.auth-body) .feed-card iframe {
    max-width: 100% !important;
  }

  html.instagram-webview body.page-perfil .profile-unified-feed .feed-action-row {
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #e3ebf2 !important;
  }

  /* Player com espaco nas laterais, sem sair do card. */
  html.instagram-webview body:not(.auth-body) .music-layer-card,
  html.instagram-webview body.page-perfil .profile-unified-feed .music-layer-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 72px !important;
    grid-template-columns: 56px minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html.instagram-webview body:not(.auth-body) .music-cover-tile {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  html.instagram-webview body:not(.auth-body) .music-layer-meta {
    min-width: 0 !important;
  }

  html.instagram-webview body:not(.auth-body) .music-layer-meta strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html.instagram-webview body:not(.auth-body) .music-layer-meta small,
  html.instagram-webview body:not(.auth-body) .music-time-left {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  html.instagram-webview body:not(.auth-body) .music-play-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  /* Formularios e chamadas de login sem estouro ou sobreposicao. */
  html.instagram-webview body.page-perfil .recado-form-card,
  html.instagram-webview body.page-perfil .depoimento-form-card,
  html.instagram-webview body.page-perfil .auth-action-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid #c9d9e6 !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: #4b4b4b !important;
    box-shadow: 0 4px 13px rgba(45, 83, 111, .09) !important;
    overflow: hidden !important;
  }

  html.instagram-webview body.page-perfil .auth-action-card {
    display: block !important;
    text-decoration: none !important;
  }

  html.instagram-webview body.page-perfil .auth-action-card .section-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  html.instagram-webview body.page-perfil .auth-action-card p {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  html.instagram-webview body.page-perfil .recado-form-card textarea,
  html.instagram-webview body.page-perfil .depoimento-form-card textarea {
    width: 100% !important;
    min-height: 116px !important;
    padding: 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  html.instagram-webview body.page-perfil .recado-form-card .btn,
  html.instagram-webview body.page-perfil .depoimento-form-card .btn,
  html.instagram-webview body.page-perfil .auth-action-card .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}