/* ========================================================
   RADARSPY — MÓDULO MOBILE 6.10.0
   Progressive Enhancement — Totalmente responsivo para smartphones
   Preserva 100% da experiência de desktop e elimina rolagem horizontal
   ======================================================== */

@media (max-width: 768px) {
  /* 1. Viewport e Prevenção de Transbordamento Horizontal (iOS / Android) */
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 86px;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    font-size: 15px;
    margin: 0;
    padding: 0;
  }

  * {
    box-sizing: border-box !important;
  }

  /* 2. Cabeçalho Compacto do Radar (#radar-shell) */
  #radar-shell {
    width: 100% !important;
    max-width: 100vw !important;
  }

  #radar-shell header {
    padding: 10px 14px !important;
    background: linear-gradient(100deg, #162033, #0f242c) !important;
    border-bottom: 1px solid #233045 !important;
  }

  #radar-shell .radar-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  #radar-shell h1 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #radar-shell .radar-brand-icon {
    width: 24px !important;
    height: 28px !important;
    margin-right: 4px !important;
  }

  #radar-shell .radar-version {
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  /* Oculta o subtítulo descritivo longo no mobile para liberar altura útil */
  #radar-shell p {
    display: none !important;
  }

  /* Navegação em Pílulas com Scroll Horizontal Suave */
  #radar-shell .ux-primary-nav {
    border-bottom: 1px solid #233045 !important;
    background: #0b1320 !important;
  }

  #radar-shell .ux-nav-inner {
    padding: 6px 10px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #radar-shell .ux-nav-inner::-webkit-scrollbar {
    display: none;
  }

  #radar-shell .ux-nav-inner a,
  #radar-shell .ux-nav-inner button {
    padding: 7px 11px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 3. Área Principal e Cartões Globais */
  main {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 10px !important;
    overflow-x: hidden !important;
  }

  .intro,
  .panel,
  .card,
  section,
  aside,
  #empty {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow-wrap: anywhere !important;
  }

  .intro {
    font-size: 13px !important;
  }

  /* 4. Estúdio de Criação de Anúncios (/analise/) */
  nav.actions[aria-label="Área de trabalho"] {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 8px 0 14px !important;
  }

  nav.actions[aria-label="Área de trabalho"] button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
  }

  .workflow-shell {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin: 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .workflow-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .workflow-top h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin: 4px 0 !important;
  }

  .workflow-top p {
    font-size: 13px !important;
  }

  .workflow-back {
    width: 100% !important;
    text-align: center !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  /* Etapas 01 a 04 no Mobile (2x2 compacto e ergonômico) */
  .workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 14px 0 !important;
    width: 100% !important;
  }

  .workflow-steps li {
    border-radius: 9px !important;
    min-width: 0 !important;
  }

  .workflow-steps a {
    padding: 8px !important;
    font-size: 11px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
  }

  .workflow-steps b {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .workflow-steps a span {
    white-space: normal !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .workflow-data,
  .workflow-review,
  .workflow-next {
    padding: 13px 11px !important;
    border-radius: 11px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
  }

  .workflow-candidates {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .workflow-candidate {
    padding: 11px !important;
    border-radius: 9px !important;
    overflow-wrap: anywhere !important;
  }

  .workflow-candidate strong {
    font-size: 13px !important;
  }

  .workflow-candidate button {
    width: 100% !important;
    min-height: 44px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Botão principal de ação do workflow */
  #workflow-generate {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    justify-content: center !important;
  }

  /* Seleção de modo de criação */
  .creator-mode-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .creator-mode-options label {
    padding: 11px !important;
    font-size: 13px !important;
  }

  /* Workspace e Editor */
  .workspace {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .workspace aside {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  #editor {
    width: 100% !important;
    max-width: 100% !important;
  }

  #quick-create,
  .studio-primary,
  .studio-secondary,
  .studio-results,
  #optional-adjustments {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .studio-primary h3,
  .studio-results h3 {
    font-size: 16px !important;
  }

  /* Bloco de Código JSON — Quebra segura de linha sem esticar a tela */
  pre,
  #snapshot-raw {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  /* Grids de métricas e mídias */
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .metric {
    padding: 10px 8px !important;
    border-radius: 8px !important;
  }

  .metric strong {
    font-size: 18px !important;
  }

  .metric small {
    font-size: 11px !important;
  }

  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .media-card {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .media-card img,
  .media-card video {
    height: 120px !important;
  }

  .media-card p {
    font-size: 11px !important;
  }

  /* 5. Inputs, Formulários e Prevenção de Auto-Zoom no iOS Safari */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Botões ergonômicos para toque */
  .actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  button,
  .button,
  .studio-generate,
  .quiet,
  .secondary {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
  }

  /* 6. Janela Modal de Progresso IA no Mobile */
  .radar-modal-overlay {
    padding: 12px !important;
  }

  .radar-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }

  .radar-progress-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .radar-progress-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  .radar-progress-titles h3 {
    font-size: 16px !important;
  }

  .radar-progress-titles p {
    font-size: 11px !important;
  }

  .radar-progress-steps li {
    font-size: 11px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  .radar-progress-steps li .step-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  /* 7. Tabelas no Mobile (Painel Principal e Relatórios) */
  .scroll,
  .table-wrap,
  .table-scroll,
  .ux-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    margin: 12px 0;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px 6px;
  }

  .cards,
  .split,
  .two {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .controls,
  .source-filters,
  .exportbox,
  .ux-heading,
  .ux-heading-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ux-hero {
    padding: 16px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ux-hero-actions {
    width: 100% !important;
    flex-direction: column !important;
  }

  .ux-hero-actions a {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
  }

  .radar-toolbar {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 10px !important;
  }

  .radar-mobile-hint {
    display: block;
    margin: 6px 0 10px;
    color: #b6c3d7;
    font-size: 12px;
  }
}

@media (min-width: 769px) {
  .radar-mobile-hint {
    display: none !important;
  }
}