/* ==========================================================================
   a.pass para produtores · demo do app do público
   Réplica das telas reais (SocialScreen + MatchChat) dentro da moldura do
   iPhone. Carregado só em /app-do-publico/, para não pesar as outras páginas.
   ========================================================================== */

  /* .exp-row mora no componentes.css: é usada em várias páginas. */
  .exp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: start; }
  .exp-grid > * { min-width: 0; }

  .phone-wrap { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .phone-hint { font-size: 12px; color: var(--muted); }
  .phone-hint em { color: var(--accent); }

  /* ---------- IPHONE 17 PRO ---------- */
  .iphone {
    width: 392px; max-width: 100%;
    aspect-ratio: 402 / 874;
    contain: size; /* altura vem só do aspect-ratio; o conteúdo interno nunca estica a moldura */
    position: relative;
    border-radius: 64px;
    background: #050505;
    box-shadow:
      0 0 0 1.5px #0c0c0c,
      0 0 0 5px #3d3d40,
      0 0 0 6px #17171a,
      0 34px 90px rgba(0, 0, 0, 0.6);
  }
  .ip-btn { position: absolute; background: #3d3d40; border-radius: 2px; }
  .ip-action { left: -7px; top: 118px; width: 3px; height: 26px; }
  .ip-volup { left: -7px; top: 168px; width: 3px; height: 46px; }
  .ip-voldn { left: -7px; top: 224px; width: 3px; height: 46px; }
  .ip-power { right: -7px; top: 188px; width: 3px; height: 74px; }
  .ip-cam { right: -7px; top: 296px; width: 3px; height: 32px; }

  .i-screen {
    position: absolute; inset: 11px;
    border-radius: 54px;
    overflow: hidden;
    clip-path: inset(0 round 54px); /* Safari: garante o recorte mesmo com descendentes com transform */
    background: var(--bg);
    display: flex; flex-direction: column;
    line-height: 1.35;
  }
  .i-screen [hidden] { display: none !important; } /* telas/abas ocultas nunca entram no layout */
  .d-island {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 112px; height: 31px; border-radius: 999px; background: #000; z-index: 40;
  }
  .d-island::after {
    content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; background: #0b0b10;
    box-shadow: inset 0 0 3px rgba(88, 96, 128, 0.7);
  }
  .i-status { flex: 0 0 auto; height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 14px 30px 6px; }
  .i-time { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
  .i-icons { display: flex; align-items: center; gap: 7px; }
  .i-icons svg { display: block; }
  .i-home {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 132px; height: 5px; border-radius: 999px; background: var(--text);
    opacity: 0.92; z-index: 60; pointer-events: none;
  }

  /* ---------- APP REAL: chrome (HeaderBar + EventPill + MainTabs) ---------- */
  .a-header {
    flex: 0 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border); background: var(--bg);
  }
  .a-brand { font-size: 19px; line-height: 23px; font-weight: 700; letter-spacing: -0.19px; }
  .a-brand em { color: var(--accent); }
  .a-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px 6px 5px; max-width: 170px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  }
  .a-thumb {
    width: 24px; height: 24px; border-radius: 999px; background: #1F1F1F;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; flex: 0 0 auto;
  }
  .a-pill-info { min-width: 0; }
  .a-pill-nm { display: block; font-size: 11px; font-weight: 600; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-pill-ed { display: block; font-size: 9px; line-height: 11px; color: var(--muted); margin-top: 1px; }
  .a-pill-chev { color: var(--muted); font-size: 9px; margin-left: 2px; }

  .a-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--border); }
  .a-tab {
    flex: 1; padding: 8px 0; text-align: center; position: relative;
    font-size: 13px; font-weight: 500; line-height: 18px; color: var(--muted);
  }
  .a-tab.active { color: var(--text); font-weight: 600; }
  .a-tab.active::after {
    content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
    height: 2px; background: var(--accent);
  }
  .a-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--accent); color: var(--text);
    font-size: 10px; font-weight: 700; line-height: 12px;
    margin-left: 6px; vertical-align: 1px;
  }

  .a-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
  /* Conteúdo rola por baixo da barra "liquid glass"; padding inferior
     mantém o fim da lista visível acima da pílula. */
  .a-scroll { flex: 1; overflow-y: auto; padding: 12px 12px 104px; scrollbar-width: none; }
  .a-scroll::-webkit-scrollbar { display: none; }

  /* Barra inferior igual à do app: pílula flutuante translúcida com blur
     (MainTabs "liquid glass"), conteúdo passando por baixo do vidro. */
  .a-tabbar {
    position: absolute; left: 16px; right: 16px; bottom: 26px;
    height: 60px; z-index: 30;
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(19, 19, 19, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(240, 239, 234, 0.16);
    border-radius: 999px;
  }
  .a-tb {
    position: relative;
    font-size: 9px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--muted);
  }
  .a-tb.active { color: var(--accent); font-weight: 600; }
  .a-tb-dot {
    position: absolute; top: -8px; right: -12px;
    min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
    background: var(--accent); color: var(--text);
    font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
  }

  /* ---------- ABA PESSOAS (SwipeablePersonCard) ---------- */
  .filters-bar {
    flex: 0 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border); background: var(--bg);
    font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
  }
  .filters-bar em { color: var(--accent); font-variant-numeric: tabular-nums; }
  .filters-bar svg { transition: transform 0.2s; }
  .filters-bar.open svg { transform: rotate(180deg); }
  .filters-backdrop { position: absolute; inset: 35px 0 0; background: rgba(0, 0, 0, 0.5); z-index: 34; }
  .filters-panel {
    position: absolute; top: 43px; left: 12px; right: 12px; z-index: 35;
    background: #1F1F1F; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px; display: grid; gap: 8px;
  }
  .f-pills { display: flex; gap: 4px; }
  .f-pill {
    flex: 1; min-width: 0; min-height: 40px; padding: 6px 8px;
    border: 1px solid #2E2E2E; background: var(--surface); border-radius: 6px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .f-pill.active { border-color: var(--accent); background: rgba(255, 24, 80, 0.12); }
  .f-lbl { font-size: 9px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .f-pill.active .f-lbl { color: var(--accent); }
  .f-val { font-size: 11px; font-weight: 500; letter-spacing: 0.2px; line-height: 14px; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .unlock-hint {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px; border: 1px solid var(--accent); border-radius: 6px;
    color: var(--accent); font-size: 13px; font-weight: 600; line-height: 18px;
  }

  .swipe-wrap { padding: 12px 0; }
  .swipe-card {
    width: 100%; aspect-ratio: 3 / 4;
    border-radius: 8px; overflow: hidden;
    background: var(--surface); position: relative;
    transition: transform 0.22s ease;
  }
  .swipe-card.exit-r { transform: translateX(130%) rotate(12deg); }
  .swipe-card.exit-l { transform: translateX(-130%) rotate(-12deg); }
  .s-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 700; color: var(--muted); }
  .s-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .s-bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
  .s-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
  .s-bar.on { background: #fff; }
  .s-nav { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 2; }
  .s-nav-l { left: 0; }
  .s-nav-r { right: 0; }
  .s-stamp {
    position: absolute; top: 28px; z-index: 4;
    padding: 8px 14px; border: 3px solid; border-radius: 6px;
    font-size: 18px; font-weight: 900; letter-spacing: 2px; color: var(--text);
    opacity: 0; transition: opacity 0.15s;
  }
  .s-stamp-like { right: 24px; border-color: #6BCF7F; transform: rotate(12deg); }
  .s-stamp-skip { left: 24px; border-color: var(--accent); transform: rotate(-12deg); }
  .swipe-card.exit-r .s-stamp-like { opacity: 1; }
  .swipe-card.exit-l .s-stamp-skip { opacity: 1; }
  .s-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px; background: rgba(0, 0, 0, 0.55); }
  .s-name { color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; line-height: 26px; }
  .s-age { color: rgba(255, 255, 255, 0.7); font-weight: 400; }
  .s-city { color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 18px; margin-top: 2px; }
  .s-bio { color: #fff; font-size: 13px; line-height: 18px; margin-top: 8px; }
  .s-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
  .s-score { color: var(--accent); font-size: 13px; font-weight: 700; }
  .s-hint-p { color: #fff; font-size: 13px; font-weight: 500; opacity: 0.9; }
  .s-actions { display: flex; gap: 12px; margin-top: 12px; }
  .s-btn { flex: 1; padding: 12px 0; border-radius: 6px; font-size: 15px; line-height: 22px; text-align: center; }
  .s-skip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 600; }
  .s-like { background: var(--accent); color: var(--text); font-weight: 700; }
  .s-count { font-size: 9px; font-weight: 500; letter-spacing: 0.4px; color: var(--muted); text-align: center; margin-top: 8px; min-height: 12px; }

  .a-empty { padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .a-empty-t { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 22px; margin-top: 22px; margin-bottom: 4px; }
  .a-empty-h { font-size: 13px; line-height: 18px; color: var(--muted); max-width: 280px; }
  .a-reset { margin-top: 16px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 15px; font-weight: 500; }

  /* ---------- ABA FEED (PostCard) ---------- */
  .compose {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid #2E2E2E; border-radius: 6px;
    padding: 8px 12px; margin-bottom: 12px;
  }
  .compose span { flex: 1; font-size: 13px; line-height: 18px; color: var(--muted); }
  .compose b { background: var(--accent); color: var(--text); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
  .postc { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
  .p-head { display: flex; align-items: center; gap: 8px; padding: 12px; }
  .p-ava {
    width: 30px; height: 30px; border-radius: 999px; background: #1F1F1F;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    position: relative; overflow: hidden; flex: 0 0 auto;
  }
  .p-ava i { font-style: normal; }
  .p-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .p-who { flex: 1; min-width: 0; }
  .p-user { display: block; font-size: 13px; font-weight: 600; line-height: 18px; }
  .p-meta { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.4px; line-height: 12px; color: var(--muted); margin-top: 2px; }
  .p-meta em { color: var(--accent); }
  .p-more { color: var(--muted); font-size: 14px; }
  .p-photo { display: block; width: 100%; aspect-ratio: 4 / 3; background: #0F0F0F; object-fit: cover; }
  .p-acts { display: flex; align-items: center; gap: 12px; padding: 8px 12px 0; }
  .p-act { display: flex; align-items: center; gap: 4px; color: var(--muted); }
  .p-act .ic { font-size: 16px; line-height: 16px; }
  .p-act .n { font-size: 13px; line-height: 18px; }
  .p-act.liked { color: var(--accent); }
  .p-share { margin-left: auto; color: var(--muted); font-size: 16px; }
  .p-cap { padding: 8px 12px; font-size: 13px; line-height: 18px; }
  .p-cap b { font-weight: 600; }
  .p-view-more { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.4px; color: var(--muted); margin-top: 4px; }

  /* ---------- ABA COMBINAR (MatchRow) ---------- */
  .mt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left; }
  .mt-ava {
    width: 48px; height: 48px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
    position: relative; overflow: hidden; flex: 0 0 auto;
  }
  .mt-ava i { font-style: normal; }
  .mt-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mt-name { font-size: 15px; font-weight: 700; line-height: 22px; }
  .mt-time { font-size: 9px; font-weight: 500; letter-spacing: 0.4px; color: var(--muted); margin-top: 2px; }
  .mt-badge {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--accent); color: var(--text);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 8px; flex: 0 0 auto;
  }
  .mt-chev { color: var(--muted); font-size: 24px; line-height: 24px; padding: 0 8px; }
  .mt-sep { height: 1px; background: var(--border); margin-left: 64px; }

  /* ---------- MATCH: "Combinou!" (MatchModal) ---------- */
  .m-overlay {
    position: absolute; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    padding: 22px;
    animation: fadeIn 0.3s;
  }
  .m-box {
    width: 100%; max-width: 320px;
    background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
    padding: 22px;
    display: flex; flex-direction: column; align-items: center;
  }
  .m-title { color: var(--accent); font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 32px; margin-bottom: 12px; }
  .m-photo { width: 120px; height: 120px; border-radius: 60px; border: 3px solid var(--accent); object-fit: cover; background: #1F1F1F; margin-bottom: 12px; }
  .m-sub { color: var(--text); font-size: 15px; line-height: 22px; text-align: center; margin-bottom: 16px; }
  .m-sub em { color: var(--accent); }
  .m-btn { background: var(--accent); color: var(--text); padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 22px; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- CONVERSA (MatchChatScreen) ---------- */
  .chat-screen {
    position: absolute; top: 52px; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--bg);
    display: flex; flex-direction: column;
  }
  .c-header {
    flex: 0 0 auto;
    display: flex; align-items: center;
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--border); background: var(--bg);
  }
  .c-back { color: var(--text); font-size: 26px; line-height: 24px; padding: 0 8px; }
  .c-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
  .c-more { color: var(--text); font-size: 18px; font-weight: 600; padding: 0 8px; }
  .c-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; }
  .c-msgs::-webkit-scrollbar { display: none; }
  .c-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 32px; }
  .c-empty-t { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 4px; }
  .c-empty-h { font-size: 15px; line-height: 22px; color: var(--muted); }
  .c-row { display: flex; }
  .c-row.mine { justify-content: flex-end; }
  .c-bub { max-width: 78%; padding: 8px 12px; border-radius: 8px; background: #1F1F1F; border-bottom-left-radius: 2px; }
  .c-row.mine .c-bub { background: var(--accent); border-radius: 8px; border-bottom-right-radius: 2px; }
  .c-txt { font-size: 15px; line-height: 20px; color: var(--text); overflow-wrap: break-word; }
  .c-time { font-size: 9px; font-weight: 500; letter-spacing: 0.4px; color: var(--muted); margin-top: 4px; }
  .c-row.mine .c-time { color: rgba(240, 239, 234, 0.7); text-align: right; }
  .c-composer {
    flex: 0 0 auto;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 12px 30px;
    border-top: 1px solid var(--border); background: var(--bg);
  }
  .c-input {
    flex: 1; min-width: 0;
    background: var(--surface); border: none; border-radius: 8px;
    padding: 9px 12px; color: var(--text); font-size: 15px; line-height: 20px;
    font-family: inherit; outline: none;
  }
  .c-input::placeholder { color: var(--muted); }
  .c-send { background: var(--accent); color: var(--text); border-radius: 999px; padding: 10px 12px; font-size: 15px; font-weight: 700; line-height: 20px; }
  .c-send:disabled { background: #4A4A4A; cursor: default; }


  /* ---------- RESPONSIVO ---------- */
  @media (max-width: 1180px) {
    .exp-grid { grid-template-columns: 1fr; gap: 40px; }
    .phone-wrap { position: static; order: -1; }
  }
  @media (max-width: 560px) {
    .iphone { width: 100%; }
  }