body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Evita zoom acidental em campos de input em iOS/Android */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Scrollbar personalizada (desktop) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #121821; }
::-webkit-scrollbar-thumb { background: #2c3a4d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b4a60; }

/* Safe area para notch/punch-hole em smartphones Android/iOS */
.app-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.app-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---- Chips de ativo rápido ---- */
.chip {
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chip:hover, .chip:active {
  background-color: #1d2733;
  border-color: #3b82f6;
}

/* ---- Autocomplete ---- */
.autocomplete-item {
  cursor: pointer;
  transition: background-color 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.autocomplete-item:hover, .autocomplete-item:active {
  background-color: #1d2733;
}

/* ---- Barras de progresso ---- */
.progress-bar-track {
  background: #1a2230;
  border-radius: 999px;
  overflow: hidden;
  height: 8px;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ---- Score ring SVG ---- */
.score-ring {
  transition: stroke-dashoffset 0.8s ease;
}

/* ---- Animação pulse/glow (ponto "ao vivo", alertas) ---- */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ---- Notícias ---- */
.news-item {
  border-bottom: 1px solid #1e2733;
  padding-bottom: 10px;
}
.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ---- Gráfico - container responsivo para smartphones ---- */
#chart-container, #volume-container {
  width: 100%;
  touch-action: pan-y pinch-zoom; /* Permite scroll vertical na página e zoom no gráfico */
}

/* Em smartphones (< 640px): gráfico menor para caber bem na tela */
@media (max-width: 639px) {
  #chart-container {
    height: 280px !important;
  }
  #volume-container {
    height: 70px !important;
  }
}

/* ---- Touch targets: botões maiores em mobile para toque preciso ---- */
@media (max-width: 639px) {
  .tf-tab {
    min-height: 36px;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Busca ocupa 100% em mobile */
  #analyze-form {
    flex-direction: column;
  }
  #analyze-form button {
    width: 100%;
  }
  /* Chips de ativo: scroll horizontal em mobile */
  #quick-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #quick-chips::-webkit-scrollbar { display: none; }
  /* Tabs de timeframe: scroll horizontal */
  #timeframe-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #timeframe-tabs::-webkit-scrollbar { display: none; }
}

/* ---- Modals: tela cheia em smartphones ---- */
@media (max-width: 639px) {
  #favorites-modal > div,
  #restricted-area-modal > div {
    max-height: 95vh;
    border-radius: 1rem 1rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }
  #favorites-modal,
  #restricted-area-modal {
    align-items: flex-end;
    padding: 0;
  }
}

/* ---- Prevent iOS elastic scroll no body quando modal está aberto ---- */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ---- Input: sem zoom automático em iOS (font-size >= 16px) ---- */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select {
  font-size: 16px;
}

/* ---- Botões com feedback tátil em mobile ---- */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- Legenda do gráfico: mais compacta em mobile ---- */
@media (max-width: 639px) {
  #chart-asset-name {
    font-size: 0.85rem;
  }
}

/* ---- Botão reset zoom ---- */
#chart-reset-zoom-btn {
  white-space: nowrap;
}