/* ── AI FEATURE ── */
.ai-section {
  padding: clamp(5rem, 8vw, 9rem) clamp(1.5rem, 5vw, 5rem);
  max-width: 1280px;
  margin: 0 auto;
}

.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.ai-demo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 32px oklch(14% 0.01 60 / 0.08);
}

.ai-demo-header {
  background: var(--smoke-2);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.ai-demo-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-input-area {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ai-input-label {
  font-family: 'Lora', Georgia, serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.ai-raw-text {
  background: var(--smoke);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font-family: 'Lora', Georgia, serif;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.6;
  min-height: 52px;
}

.ai-action-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-run-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--amber);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.2s;
  box-shadow: 0 3px 10px oklch(68% 0.18 58 / 0.35);
  position: relative;
  overflow: hidden;
}

.ai-run-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.ai-run-btn:not(:disabled):hover {
  background: var(--amber-dim);
  box-shadow: 0 6px 20px oklch(68% 0.18 58 / 0.45);
}

.ai-run-btn.pressing {
  transform: scale(0.95);
  box-shadow: 0 2px 8px oklch(68% 0.18 58 / 0.3);
}

.ai-run-btn.processing {
  background: var(--amber-dim);
  cursor: default;
  pointer-events: none;
}

.ai-run-btn svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.ai-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, oklch(100% 0 0 / 0.25) 50%, transparent 70%);
  transform: translateX(-100%);
}

.ai-run-btn.shimmer-anim .ai-btn-shimmer {
  animation: btnShimmer 0.7s ease-out forwards;
}

@keyframes btnShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

.ai-run-btn.done {
  background: oklch(44% 0.15 155);
  box-shadow: 0 4px 14px oklch(44% 0.15 155 / 0.3);
  pointer-events: none;
}

/* Skeleton */
.ai-skeleton-wrap { padding: 10px 4px; }

.ai-skel-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
}

.ai-skel {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--smoke-2) 25%, var(--border) 50%, var(--smoke-2) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.ai-skel-wide  { width: 90%; }
.ai-skel-med   { width: 75%; }
.ai-skel-tag   { width: 60px; height: 18px; border-radius: 3px; }
.ai-skel-sm    { width: 50px; }

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Line item entrance */
.ai-line-item-anim {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.32s ease-out, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-line-item-anim.landed {
  opacity: 1;
  transform: translateY(0);
}

.ai-output-area {
  padding: 8px;
}

.ai-line-item {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 10px;
  align-items: center;
}
.ai-line-item:nth-child(odd) { background: var(--smoke); }

.ai-li-name { color: var(--ink); font-weight: 500; }
.ai-li-type {
  font-family: 'Lora', Georgia, serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  text-align: center;
  text-transform: uppercase;
}
.type-labor { background: oklch(94% 0.06 240); color: oklch(35% 0.14 240); }
.type-mat { background: oklch(94% 0.08 155); color: oklch(35% 0.16 155); }
.type-disp { background: oklch(95% 0.04 60); color: oklch(42% 0.12 58); }

.ai-li-price {
  font-family: 'Lora', Georgia, serif;
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
}
.ai-li-total {
  font-family: 'Lora', Georgia, serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.ai-section-total {
  display: flex;
  justify-content: space-between;
  padding: 7px 8px 0;
  font-size: 11px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.ai-section-total span:last-child {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  color: var(--amber-dim);
}