/* ============================================
   SISTEMA DE DESIGN — INTERFACES NATIVAS
   Cada módulo imita visualmente o app original
   ============================================ */

/* === RESET E BASE === */
.native-app-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
  height: 85vh;
  display: flex;
  flex-direction: column;
}

/* Frame de celular ao redor */
.phone-frame {
  background: #1a1a1a;
  border-radius: 28px;
  padding: 8px;
  max-width: 436px;
  margin: 20px auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
}
.phone-frame::before {
  content: '';
  display: block;
  width: 120px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 16px 16px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* === WHATSAPP === */
:root {
  --wa-green:#00a884; --wa-green-dark:#008069; --wa-bg:#0b141a;
  --wa-bubble-out:#005c4b; --wa-bubble-in:#202c33; --wa-header:#1f2c34;
  --wa-text:#e9edef; --wa-text-secondary:#8696a0; --wa-divider:#222d34;
  --wa-input-bg:#2a3942;
  --ig-bg:#000; --ig-surface:#121212; --ig-card:#1c1c1e;
  --ig-text:#f5f5f5; --ig-text-secondary:#a8a8a8; --ig-blue:#0095f6;
  --ig-gradient:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --ig-border:#262626;
  --ig-story-ring:conic-gradient(#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433);
  --fb-blue:#1877f2; --fb-bg:#18191a; --fb-surface:#242526; --fb-card:#3a3b3c;
  --fb-text:#e4e6eb; --fb-text-secondary:#b0b3b8; --fb-divider:#3e4042;
  --tt-bg:#000; --tt-surface:#121212; --tt-text:#fff; --tt-text-secondary:#8a8b91;
  --tt-red:#fe2c55; --tt-cyan:#25f4ee; --tt-card:#1f1f1f;
  --gps-bg:#1d2c4d; --gps-surface:#263859; --gps-accent:#17b978;
  --gps-text:#e8e8e8; --gps-road:#3d5a80; --gps-water:#1b3a5c; --gps-pin:#ff4757;
  --gal-bg:#000; --gal-surface:#1c1c1e; --gal-text:#fff;
  --gal-text-secondary:#8e8e93; --gal-accent:#0a84ff;
}

@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bubbleIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}

.native-app-container ::-webkit-scrollbar{width:4px}
.native-app-container ::-webkit-scrollbar-track{background:transparent}
.native-app-container ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}

/* ============================================
   WHATSAPP
   ============================================ */
.wa-app{background:var(--wa-bg);color:var(--wa-text);height:100%;display:flex;flex-direction:column}
.wa-header{display:flex;align-items:center;padding:10px 12px;background:var(--wa-header);gap:10px}
.wa-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.wa-contact-name{font-size:15px;font-weight:500}
.wa-contact-status{font-size:12px;color:var(--wa-text-secondary)}
.wa-chat-area{flex:1;overflow-y:auto;padding:12px;background:var(--wa-bg)}
.wa-date-divider{text-align:center;margin:10px 0}
.wa-date-divider span{background:var(--wa-divider);color:var(--wa-text-secondary);padding:4px 10px;border-radius:8px;font-size:11px}
.wa-msg{max-width:75%;margin-bottom:6px;padding:8px 10px;border-radius:8px;font-size:14px;animation:bubbleIn .25s ease;position:relative}
.wa-msg.wa-in{background:var(--wa-bubble-in);align-self:flex-start;border-top-left-radius:0}
.wa-msg.wa-out{background:var(--wa-bubble-out);align-self:flex-end;border-top-right-radius:0;margin-left:auto}
.wa-msg-time{font-size:10px;color:var(--wa-text-secondary);text-align:right;margin-top:2px}
.wa-input-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--wa-header);border-top:1px solid var(--wa-divider)}
.wa-input-field{flex:1;background:var(--wa-input-bg);padding:8px 14px;border-radius:20px;color:var(--wa-text-secondary);font-size:13px}

/* ============================================
   INSTAGRAM
   ============================================ */
.ig-app{background:var(--ig-bg);color:var(--ig-text);height:100%;display:flex;flex-direction:column}
.ig-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ig-border)}
.ig-logo{font-family:'Grand Hotel',cursive;font-size:24px}
.ig-stories{display:flex;gap:12px;padding:12px;overflow-x:auto;border-bottom:1px solid var(--ig-border)}
.ig-story{flex-shrink:0;text-align:center;width:72px}
.ig-story-ring{width:64px;height:64px;border-radius:50%;padding:2.5px;background:var(--ig-story-ring);margin:0 auto}
.ig-story-avatar{width:100%;height:100%;border-radius:50%;background:#333;border:2px solid var(--ig-bg);background-size:cover;background-position:center}
.ig-story-name{font-size:11px;margin-top:4px;color:var(--ig-text-secondary)}
.ig-feed{flex:1;overflow-y:auto}
.ig-post{border-bottom:1px solid var(--ig-border);padding-bottom:12px;margin-bottom:12px}
.ig-post-header{display:flex;align-items:center;padding:10px 14px;gap:10px}
.ig-post-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#833ab4,#e1306c);background-size:cover}
.ig-post-name{font-size:13px;font-weight:600}
.ig-post-image{width:100%;aspect-ratio:1;background:linear-gradient(135deg,#1c1c1e,#333);background-size:cover;background-position:center}
.ig-post-actions{display:flex;gap:16px;padding:10px 14px;font-size:20px}
.ig-post-caption{padding:0 14px;font-size:13px}
.ig-post-caption b{font-weight:600;margin-right:6px}
.ig-post-time{padding:4px 14px;font-size:10px;color:var(--ig-text-secondary);text-transform:uppercase}

/* ============================================
   FACEBOOK
   ============================================ */
.fb-app{background:var(--fb-bg);color:var(--fb-text);height:100%;display:flex;flex-direction:column}
.fb-header{padding:12px 16px;border-bottom:1px solid var(--fb-divider);display:flex;justify-content:space-between;align-items:center}
.fb-logo{color:var(--fb-blue);font-size:24px;font-weight:900}
.fb-feed{flex:1;overflow-y:auto;padding:10px}
.fb-post{background:var(--fb-surface);border-radius:10px;margin-bottom:10px;overflow:hidden}
.fb-post-header{display:flex;align-items:center;padding:12px;gap:10px}
.fb-post-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1877f2,#0d5fbf)}
.fb-post-name{font-size:14px;font-weight:600}
.fb-post-time{font-size:11px;color:var(--fb-text-secondary)}
.fb-post-text{padding:0 12px 10px;font-size:14px;line-height:1.4}
.fb-post-image{width:100%;aspect-ratio:1.2;background:#333;background-size:cover}
.fb-post-reactions{display:flex;justify-content:space-between;padding:10px 12px;font-size:12px;color:var(--fb-text-secondary);border-top:1px solid var(--fb-divider)}

/* ============================================
   TIKTOK
   ============================================ */
.tt-app{background:var(--tt-bg);color:var(--tt-text);height:100%;display:flex;flex-direction:column;position:relative}
.tt-header{padding:12px 16px;display:flex;justify-content:center;gap:24px;font-size:15px}
.tt-video-container{flex:1;position:relative;background:#000;overflow:hidden}
.tt-video-bg{width:100%;height:100%;background:linear-gradient(180deg,#333,#000);background-size:cover;background-position:center}
.tt-video-info{position:absolute;bottom:60px;left:14px;right:70px}
.tt-video-user{font-weight:600;font-size:14px;margin-bottom:4px}
.tt-video-caption{font-size:13px;line-height:1.3}
.tt-sidebar{position:absolute;right:12px;bottom:80px;display:flex;flex-direction:column;gap:18px;align-items:center}
.tt-action{text-align:center}
.tt-action-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:20px}
.tt-action-count{font-size:11px;margin-top:3px}

/* ============================================
   GPS
   ============================================ */
.gps-app{background:var(--gps-bg);color:var(--gps-text);height:100%;display:flex;flex-direction:column}
.gps-header{padding:14px 16px;background:var(--gps-surface);display:flex;justify-content:space-between;align-items:center}
.gps-map{flex:1;background:linear-gradient(135deg,var(--gps-road),var(--gps-water));position:relative;overflow:hidden}
.gps-map::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.03) 40px,rgba(255,255,255,.03) 80px),
  repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.02) 60px,rgba(255,255,255,.02) 120px)}
.gps-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);width:30px;height:30px;background:var(--gps-pin);border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 8px 20px rgba(0,0,0,.3);animation:pulse 2s infinite}
.gps-info-card{background:var(--gps-surface);padding:14px 16px;border-top:1px solid rgba(255,255,255,.05)}
.gps-address{font-size:14px;font-weight:600}
.gps-coords{font-size:11px;color:var(--gps-text);opacity:.7;margin-top:4px}

/* ============================================
   GALERIA
   ============================================ */
.gal-app{background:var(--gal-bg);color:var(--gal-text);height:100%;display:flex;flex-direction:column}
.gal-header{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}
.gal-title{font-size:20px;font-weight:700}
.gal-tabs{display:flex;justify-content:center;gap:20px;padding:10px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05)}
.gal-tab.active{color:var(--gal-accent);font-weight:600}
.gal-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gal-grid-gap);padding:var(--gal-grid-gap)}
.gal-item{aspect-ratio:1;background:#333 center/cover;position:relative;cursor:pointer}
.gal-item.video::after{content:'▶';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.5);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}

/* ============================================
   MODULE SELECTOR
   ============================================ */
.module-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;padding:20px;max-width:620px;margin:0 auto}
.module-card{background:linear-gradient(145deg,#0d1220,#151a2e);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px 14px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s;color:#fff}
.module-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.4)}
.module-icon{font-size:36px;margin-bottom:8px}
.module-name{font-size:13px;font-weight:600}
.module-count{font-size:11px;color:#64748b;margin-top:4px}