/* ==========================================================================
   HuntPDF — smart AI tool front  (ai-smart.css)

   Loaded LAST on the 7 AI tools. Two things:

     1. The AI hero — an "AI" badge on the title so these read as the smart
        tier of the site, not as one more converter.
     2. The smart bar — the strip that appears under the settings panel and
        either counts down to an automatic start or points you at the one
        field that still needs an answer.

   White corporate cards, HuntPDF blue, no glass. Same visual family as the
   attach box in tool-ux.css.
   ========================================================================== */

/* ---------- 1. the AI hero ---------- */
body.hp-ai .tool-hero h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.hp-ai .tool-hero h1::before {
  content: 'AI';
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #4F8CFB 0%, #2563EB 55%, #1D4ED8 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .30);
  transform: translateY(-2px);
}

/* No ::after on the subtitle.
   It used to append "· Runs automatically once your file is in." to the hero
   paragraph. It read like a tacked-on fragment rather than a sentence, it
   pushed the subtitle into the download icon, and it is redundant — the smart
   bar says exactly this, at the moment it becomes true, right where the user
   is looking. Saying it twice is worse than saying it once. */

/* ---------- spacing: give the CTA room to breathe ---------- */
/* The primary action was sitting flush against the "Or upload from" row —
   0px between them — so the page read as one undifferentiated blue slab. */
body.hp-ai .actions,
body.hp-ai #goBtn {
  margin-top: 18px !important;
}
body.hp-ai .hp-sources,
body.hp-ai [class*="hp-source"] {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

/* ---------- 2. the smart bar ---------- */
.ai-smart {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;

  width: 100%;
  max-width: 636px;          /* dead in line with the attach box */
  margin: 14px auto 4px;
  padding: 13px 16px;
  box-sizing: border-box;

  background: #FFFFFF;
  border: 1px solid #DBEAFE;
  border-left: 3px solid #2563EB;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .08), 0 1px 2px rgba(15, 23, 42, .04);

  font-size: 13.5px;
  line-height: 1.45;
  color: #374151;
  animation: ai-smart-in .28s ease-out both;
}
@keyframes ai-smart-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.ai-smart-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #2563EB;
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}
.ai-smart-ico svg { width: 17px; height: 17px; }

.ai-smart-txt { flex: 1 1 auto; min-width: 0; }
.ai-smart-txt b { color: #1E3A8A; font-weight: 700; }

.ai-smart kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1E3A8A;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* the cancel affordance — quiet, but never hidden */
.ai-smart-cancel {
  flex: 0 0 auto;
  padding: 7px 14px;
  font: 600 12.5px/1 inherit;
  font-family: inherit;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .16s;
}
.ai-smart-cancel:hover {
  color: #0F172A;
  background: #F1F5F9;
  border-color: #CBD5E1;
}

/* the countdown, drawn along the bottom edge of the bar */
.ai-smart-ring {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #EFF6FF;
}
.ai-smart-ring i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #60A5FA, #2563EB);
  transition: width .08s linear;
}

/* ---- states ---- */
.ai-smart.is-ask {
  border-left-color: #F59E0B;
}
.ai-smart.is-ask .ai-smart-ico {
  color: #B45309;
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .14);
}
.ai-smart.is-ask .ai-smart-txt b { color: #92400E; }

.ai-smart.is-manual {
  border-left-color: #94A3B8;
  background: #F8FAFC;
  color: #64748B;
}
.ai-smart.is-manual .ai-smart-ico {
  color: #64748B;
  background: #F1F5F9;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .14);
}
.ai-smart.is-manual .ai-smart-txt b { color: #475569; }

/* ---- the field the smart bar is pointing at ---- */
body.hp-ai .options textarea:focus,
body.hp-ai .options input:focus,
body.hp-ai .options select:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* ---- mobile ---- */
@media (max-width: 560px) {
  .ai-smart {
    flex-wrap: wrap;
    padding: 12px 14px;
    font-size: 13px;
  }
  .ai-smart-txt { flex: 1 1 100%; order: 2; }
  .ai-smart-ico { order: 1; }
  .ai-smart-cancel { order: 3; margin-left: auto; }
}