@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
  --bg-dark: #020617;
  --bg-card: rgba(15, 23, 42, 0.7);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-primary: #0ea5e9;
  --accent-secondary: #10b981;
  --gradient-btn: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
  --glass-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; -webkit-tap-highlight-color: transparent; }

/* Custom Minimalist Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.2); border-radius: 10px; transition: 0.3s; }
::-webkit-scrollbar-thumb:hover { background: rgba(14, 165, 233, 0.5); }

body { background-color: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: var(--text-main); overflow: hidden; background-image: radial-gradient(circle at 50% 0%, #0f172a 0%, #000 100%); }

#app-container { width: 100vw; height: 100vh; position: relative; overflow: hidden; background-color: var(--bg-dark); }

@media (min-aspect-ratio: 9/16) {
  #app-container { height: 100vh; width: calc(100vh * (1080 / 1920)); border-radius: 40px; border: 12px solid #1e293b; box-shadow: 0 0 80px rgba(14, 165, 233, 0.15); }
  #app-container::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30%; height: 28px; background: #1e293b; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; z-index: 9999; }
}

.view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateX(40px) scale(0.98); transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1); overflow-y: auto; overflow-x: hidden; }
.view.active { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.view.exit-left { transform: translateX(-40px) scale(0.98); opacity: 0; }

#progress-container { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.05); z-index: 9000; }
#global-progress { height: 100%; width: 0%; background: var(--gradient-btn); transition: width 0.6s cubic-bezier(0.25, 1, 0.2, 1), opacity 0.3s; border-radius: 0 4px 4px 0; box-shadow: 0 0 10px var(--accent-primary); }

.glass { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 24px; }
.content-area { flex: 1; padding: 40px 24px 32px 24px; display: flex; flex-direction: column; position: relative; z-index: 10; }

.bg-glow { position: absolute; width: 300px; height: 300px; background: var(--accent-primary); filter: blur(120px); border-radius: 50%; opacity: 0.15; z-index: 0; }
.bg-glow-2 { position: absolute; width: 250px; height: 250px; background: var(--accent-secondary); filter: blur(120px); border-radius: 50%; opacity: 0.15; z-index: 0; }

h1 { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
p { font-size: 16px; color: var(--text-muted); line-height: 1.5; }
.text-gradient { background: var(--gradient-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.btn { background: var(--gradient-btn); color: white; border: none; padding: 18px 24px; border-radius: 100px; font-size: 18px; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2); }
.btn:active { transform: scale(0.95); box-shadow: 0 2px 5px rgba(14, 165, 233, 0.1); }
.btn-outline { background: transparent; border: 1px solid var(--text-muted); color: var(--text-main); box-shadow: none; }
.btn-outline:active { background: rgba(255,255,255,0.05); transform: scale(0.95); }

.input-group { margin-bottom: 20px; position: relative; }
.input-group label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--text-muted); font-weight: 600; }
.input-group input { width: 100%; background: var(--bg-card); border: 2px solid transparent; color: var(--text-main); padding: 16px 20px; border-radius: 16px; font-size: 16px; outline: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.2, 1); box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); }
.input-group input:focus { border-color: var(--accent-primary); background: rgba(15, 23, 42, 0.9); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.1), inset 0 2px 5px rgba(0,0,0,0.2); }
.input-group input:disabled { opacity: 0.8; }
.input-group i { position: absolute; right: 20px; top: 42px; color: var(--text-muted); transition: 0.3s; }
.input-group input:focus + i { color: var(--accent-primary); }

.app-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; z-index: 10; margin-top: 24px;}
.back-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-main); cursor: pointer; transition: 0.2s; }
.back-btn:active { transform: scale(0.9); background: rgba(255,255,255,0.1); }

.plan-card { padding: 24px; margin-bottom: 16px; position: relative; overflow: hidden; transition: all 0.3s; cursor: pointer; border: 2px solid transparent; }
.plan-card.active { border-color: var(--accent-primary); background: rgba(14, 165, 233, 0.1); transform: scale(1.02); box-shadow: 0 10px 25px rgba(14, 165, 233, 0.2); }
.plan-badge { position: absolute; top: 12px; right: 12px; background: var(--gradient-btn); font-size: 12px; padding: 4px 10px; border-radius: 100px; font-weight: 600; }

.virtual-card { width: 100%; height: 220px; border-radius: 24px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 40px rgba(0,0,0,0.5); margin-bottom: 24px; transform: perspective(1000px) rotateX(0deg); transition: 0.5s; }
.virtual-card:active { transform: perspective(1000px) rotateX(5deg) scale(0.98); }
.card-logo { font-weight: 700; font-size: 20px; }
.card-chip { width: 40px; height: 30px; background: rgba(255,255,255,0.8); border-radius: 6px; }
.card-number { font-size: 22px; letter-spacing: 2px; font-family: monospace; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.action-btn { background: var(--bg-card); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--text-main); transition: 0.2s; cursor: pointer; }
.action-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.1); }
.fab-ai { position: fixed; bottom: 32px; right: 24px; width: 64px; height: 64px; border-radius: 32px; background: var(--gradient-btn); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4); z-index: 100; transition: 0.2s; animation: pulse 2s infinite; cursor: pointer; color:white; }
.fab-ai:active { transform: scale(0.9); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.5); } 70% { box-shadow: 0 0 0 20px rgba(14,165,233,0); } 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); } }

/* Chat UI Styles */
.chat-bubble { max-width: 85%; padding: 14px 18px; border-radius: 18px; font-size: 15px; line-height: 1.4; animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.chat-ai { background: var(--bg-card); color: var(--text-main); align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid var(--glass-border); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.chat-user { background: var(--gradient-btn); color: white; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 4px 10px rgba(14,165,233,0.2); }
.chat-option-btn { background: rgba(14, 165, 233, 0.15); border: 1px solid var(--accent-primary); color: var(--accent-primary); padding: 10px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: 0.2s; animation: fadeIn 0.3s forwards; }
.chat-option-btn:active { background: var(--accent-primary); color: white; transform: scale(0.95); }
.typing-indicator { display: flex; gap: 6px; padding: 4px 0; }
.typing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); animation: typing 1.4s infinite ease-in-out; }
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Map Widget in Chat */
.map-widget {
    width: 100%;
    height: 140px;
    border-radius: 12px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="%231e293b"/><path d="M0 100 Q 100 50, 200 100 T 400 100" stroke="%23334155" stroke-width="4" fill="none"/><path d="M 150 150 Q 200 50, 300 180" stroke="%23334155" stroke-width="4" fill="none"/><circle cx="150" cy="90" r="6" fill="%230ea5e9"/><circle cx="200" cy="110" r="8" fill="%2310b981" stroke="%23020617" stroke-width="2"/><circle cx="280" cy="80" r="6" fill="%230ea5e9"/><circle cx="100" cy="120" r="6" fill="%230ea5e9"/><circle cx="240" cy="140" r="6" fill="%230ea5e9"/></svg>') no-repeat center center;
    background-size: cover;
    border: 1px solid var(--glass-border);
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}
.map-widget.sp-map {
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="%231e293b"/><path d="M0 50 Q 150 150, 400 50" stroke="%23334155" stroke-width="4" fill="none"/><circle cx="200" cy="100" r="8" fill="%23f59e0b" stroke="%23020617" stroke-width="2"/></svg>') no-repeat center center;
    background-size: cover;
}
.map-widget::after {
    content: '🗺️ Localização Atual: Manaus-AM';
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.6);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: white;
}
.map-widget.sp-map::after {
    content: '🗺️ Buscando fora da rede: São Paulo-SP';
}