/* K.ai product pages (views/kai/*). Uses the site's theme variables from main.css
   (--fg-strong, --fg-soft, --fg-muted, --line, --panel …) so every block adapts to light and dark sections. */

/* "New" tag next to K.ai in the menu */
.kai-new {
  display: inline-flex;
  align-items: center;
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #04121f;
  background: linear-gradient(90deg, #22d3ee, #2e8fff);
  line-height: 1.4;
}

/* Live status dot */
.kai-live {
  position: relative;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: #34d399;
  flex-shrink: 0;
}
.kai-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #34d39966;
  animation: kai-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes kai-ping {
  0% { transform: scale(.6); opacity: 1; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Call mockup (hero) ---------- */
.kai-call {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #ffffff12, #ffffff05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem;
  box-shadow: 0 30px 80px -30px #0b6fd666;
}
.kai-call-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.kai-avatar {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(135deg, #2e8fff, #22d3ee);
}
.kai-timer {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.kai-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  margin: 1rem 0 .25rem;
}
.kai-wave span {
  flex: 1;
  max-width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #2e8fff);
  animation: kai-wave 1.2s ease-in-out infinite;
  height: 30%;
}
@keyframes kai-wave {
  0%, 100% { height: 18%; opacity: .6; }
  50% { height: 100%; opacity: 1; }
}
.kai-bubbles { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; font-size: .875rem; line-height: 1.55; }
.kai-bubble { max-width: 86%; padding: .65rem .95rem; border-radius: 1rem; }
.kai-bubble small { display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.kai-bubble-caller { align-self: flex-start; border-bottom-left-radius: .3rem; background: var(--panel-hover); color: var(--fg-soft); }
.kai-bubble-agent { align-self: flex-end; border-bottom-right-radius: .3rem; color: #fff; background: linear-gradient(135deg, #0b6fd6, #2e8fff); }
.kai-results { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.kai-result {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--fg-strong);
  border: 1px solid var(--line);
  background: var(--panel);
}
.kai-result svg { width: .9rem; height: .9rem; color: #34d399; }

/* ---------- Product cards (hub) ---------- */
.kai-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--card-shadow);
  padding: 2rem;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .4s, box-shadow .4s;
}
a.kai-product:hover { transform: translateY(-4px); border-color: #22d3ee80; box-shadow: 0 0 0 1px #2e8fff2e, 0 24px 60px -24px #0d264c55; }
.kai-product-soon { border-style: dashed; background: transparent; box-shadow: none; }
.kai-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--fg-soft);
}
.kai-status-live { color: #047857; border-color: #34d39966; background: #34d3991a; }
section[class*=bg-ink] .kai-status-live { color: #6ee7b7; }

/* ---------- Mini dashboard mockup ---------- */
.kai-dash {
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.kai-dash-bar { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel-faint); }
.kai-dash-bar i { width: .6rem; height: .6rem; border-radius: 999px; background: var(--dot-idle); }
.kai-dash-bar span { margin-left: .5rem; font-size: .72rem; font-weight: 600; color: var(--fg-muted); }
.kai-dash-body { display: grid; gap: .9rem; padding: 1.1rem; }
.kai-dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.kai-dash-stat { border-radius: .9rem; border: 1px solid var(--line); padding: .75rem .85rem; }
.kai-dash-stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--fg-strong); line-height: 1.2; }
.kai-dash-stat span { font-size: .7rem; color: var(--fg-muted); }
.kai-dash-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: .9rem; border: 1px solid var(--line); font-size: .8rem; }
.kai-dash-row strong { color: var(--fg-strong); font-weight: 600; }
.kai-dash-row em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.kai-tag-green { color: #047857; background: #34d3991f; }
.kai-tag-blue { color: #0b6fd6; background: #2e8fff1a; }
.kai-tag-amber { color: #b45309; background: #f59e0b1f; }
.kai-dash-row .kai-dot { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--tile-bg); color: var(--tile-fg); }
.kai-dash-row .kai-dot svg { width: 1rem; height: 1rem; }
.kai-dash-row .kai-sub { display: block; color: var(--fg-muted); font-size: .72rem; }

/* ---------- Step numbers on the "how it works" timeline ---------- */
.kai-step-num {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: .85rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0b6fd6, #22d3ee);
}

@media (max-width: 640px) {
  .kai-call { padding: 1.15rem; }
  .kai-bubble { max-width: 92%; }
  .kai-dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .kai-wave span, .kai-live::after { animation: none; }
  .kai-wave span { height: 55%; }
}

/* Utilities used on the K.ai pages that the compiled main.css doesn't include (same values as Tailwind's) */
.\!mb-0 { margin-bottom: 0 !important; }
.border-dashed { border-style: dashed; }
.min-w-0 { min-width: 0; }
.mt-auto { margin-top: auto; }
.p-4 { padding: 1rem; }
.pt-7 { padding-top: 1.75rem; }

/* status tags keep their own width inside the column cards */
.kai-product > .kai-status { align-self: flex-start; }