/* mobile.css — Phone-friendly responsive overrides */
/* Applies to all phone widths up to 640px */

@media (max-width: 640px) {

  /* ── HEADER ── */
  header {
    padding: 10px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .logo { font-size: 1.1rem; }
  .logo-tag { font-size: .45rem; }
  .hdr-right { gap: 6px; }
  .session-clock { display: none; }
  .act-btn .act-lbl { display: none; }
  .act-btn { padding: 6px 9px; }

  /* ── SEARCH ZONE ── */
  .search-zone { padding: 14px 20px 12px; gap: 10px; }
  .search-label { padding: 0; }
  .search-row { flex-direction: row; gap: 8px; align-items: stretch; }
  .url-wrap { flex: 1; min-width: 0; }
  .inspect-btn { flex-shrink: 0; white-space: nowrap; }

  /* ── QUICK TARGETS — centered ── */
  .quick-row {
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    padding: 0 4px;
  }
  .quick-lbl {
    width: 100%;
    text-align: center;
  }

  /* ── WORKSPACE ── */
  .workspace {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .source-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-red);
    min-height: 300px;
    flex-shrink: 0;
  }
  .vuln-panel {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    flex-shrink: 0;
  }
  .aidet-panel {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* ── CONTROLS BAR ── */
  .controls-bar { padding: 6px 20px; gap: 6px; flex-wrap: wrap; }
  .vtab span:not(.vtab-dot) { display: none; }
  .vtab { padding: 6px 10px; }

  /* ── CODE VIEW ── */
  .code-scroll { padding: 14px 20px; font-size: .78rem; }
  .line-gutter { width: 32px; }
  pre { font-size: .78rem; }

  /* ── SCAN BUTTONS — padded from edges ── */
  .scan-launch-btn {
    font-size: .56rem;
    padding: 12px 20px;
    margin: 0 4px;
    width: calc(100% - 8px);
  }

  /* ── VULN PANEL ── */
  .vuln-header { padding: 10px 20px; }
  .vuln-scroll { padding: 12px 20px; gap: 10px; }
  .vuln-summary { padding: 10px 20px; }
  .vuln-disclaimer { padding: 8px 20px; }
  .finding-name { font-size: .74rem; }

  /* ── AI DETECT + TECH STACK ── */
  .aidet-scroll { padding: 12px 20px; }
  .aidet-title { font-size: .55rem; }
  .aidet-sig { padding: 6px 10px; font-size: .68rem; }

  /* ── FOOTER ── */
  .footer { display: none; }

  /* ── PREVIEW FLOAT ── */
  .preview-float {
    width: calc(100vw - 24px);
    height: 220px;
    right: 12px;
    bottom: 12px;
    left: auto;
  }
  .preview-float.maximized {
    width: 100vw;
    height: 100vh;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }

  /* ── SCROLL TO TOP ── */
  .scroll-top-btn {
    bottom: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
  }

  /* ── PREVIEW POP TAB ── */
  .preview-pop-tab { bottom: 64px; }

  /* ── SHEETS / OVERLAYS ── */
  .sheet { max-height: 90vh; }
  .sheet-header { padding: 12px 20px; }
  .copy-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-desc { display: none; }

  /* ── ADMIN DASHBOARD ── */
  #admin-user-list { max-height: 60vh; }
}

@media (max-width: 380px) {
  .logo { font-size: .9rem; }
  .search-zone { padding: 12px 16px; }
  .vuln-scroll, .aidet-scroll { padding: 10px 16px; }
  .scan-launch-btn { margin: 0 2px; width: calc(100% - 4px); }
  .copy-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Scan button — keep zoom but prevent overflow on mobile */
@media (max-width: 640px) {
  .scan-launch-btn { box-sizing: border-box; max-width: 100%; }
  @keyframes scan-pulse {
    0%   { transform: scale(1);     box-shadow: 0 0 12px var(--purple-glow); }
    40%  { transform: scale(1.012); box-shadow: 0 0 20px var(--purple-glow); }
    100% { transform: scale(1);     box-shadow: 0 0 12px var(--purple-glow); }
  }
}