/* TAI Contextual CTA — scoped styles */
.tcta-search, .tcta-service {
  padding: 16px;
  border-radius: 12px;
}
.tcta-title { font-size: .95rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.tcta-desc  { font-size: .82rem; color: rgba(255,255,255,.85); margin: 0 0 12px; }
.tcta-form-row { display: flex; gap: 8px; margin-bottom: 10px; }
.tcta-input {
  flex: 1; padding: 8px 12px; border-radius: 8px; border: none;
  font-size: .9rem; min-width: 0; background: rgba(255,255,255,.95);
}
.tcta-input:focus { outline: 2px solid #60a5fa; }
.tcta-btn {
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: #fff; color: #0f172a; font-weight: 700; font-size: .88rem;
  white-space: nowrap;
}
.tcta-btn:hover { background: #f1f5f9; }
.tcta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tcta-chip {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,.18); color: #fff; font-size: .8rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.35);
}
.tcta-chip:hover { background: rgba(255,255,255,.28); color: #fff; }
.tcta-empty-msg { font-size: .8rem; color: #fca5a5; display: block; margin-top: 4px; }
.tcta-service-cards {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.tcta-service-card {
  flex: 1 1 140px; padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,.13); color: #fff; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .15s;
}
.tcta-service-card:hover { background: rgba(255,255,255,.22); color: #fff; }
.tcta-svc-label { font-size: .9rem; font-weight: 700; }
.tcta-svc-desc  { font-size: .78rem; opacity: .82; }
@media (max-width: 480px) {
  .tcta-form-row { flex-direction: column; }
  .tcta-btn { width: 100%; }
  .tcta-service-cards { flex-direction: column; }
  .tcta-service-card { flex: none; }
}

/* Worker pages inject .kn-cta a / .sn-cta a at specificity (0,1,1) which would
   override .tcta-service-card and .tcta-chip (both <a> tags) at (0,1,0).
   :is(.kn-cta,.sn-cta) + .tcta-* = (0,2,0) beats (0,1,1); color !important
   needed because Worker uses color:#0f172a!important. */
:is(.kn-cta,.sn-cta) .tcta-service-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.13);
  color: #fff !important;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  gap: 4px;
  transition: background .15s;
}
:is(.kn-cta,.sn-cta) .tcta-service-card:hover {
  background: rgba(255,255,255,.22);
  color: #fff !important;
}
:is(.kn-cta,.sn-cta) .tcta-service-card:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
:is(.kn-cta,.sn-cta) .tcta-chip {
  display: inline-block;
  background: rgba(255,255,255,.18);
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: .8rem;
  font-weight: normal;
  text-decoration: none;
}
:is(.kn-cta,.sn-cta) .tcta-chip:hover {
  background: rgba(255,255,255,.28);
  color: #fff !important;
}
@media (max-width: 390px) {
  :is(.kn-cta,.sn-cta) .tcta-service-cards { flex-direction: column; }
  :is(.kn-cta,.sn-cta) .tcta-service-card { flex: none; width: 100%; }
}