/* Microsoft 365 section (_includes/sections/microsoft365.html). Plain CSS, no build step. */

.m365-demo {
  --m365-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Activity line: done vs. running label and icon */
.m365-demo .m365-label-run,
.m365-demo .m365-icon-run { display: none; }
.m365-demo[data-state="searching"] .m365-label-run,
.m365-demo[data-state="searching"] .m365-icon-run { display: block; }
.m365-demo[data-state="searching"] .m365-label-done,
.m365-demo[data-state="searching"] .m365-icon-done,
.m365-demo[data-state="searching"] .m365-activity-kinds,
.m365-demo[data-state="searching"] .m365-chevron,
.m365-demo[data-state="pending"] .m365-activity-kinds { visibility: hidden; }
.m365-demo[data-state="searching"] .m365-label-done,
.m365-demo[data-state="searching"] .m365-icon-done { display: none; }
.m365-demo[data-state="searching"] .m365-icon-run { animation: m365-spin 0.8s linear infinite; }
.m365-demo[data-state="pending"] .m365-activity { opacity: 0; }

.m365-activity:focus-visible {
  outline: 2px solid #123963;
  outline-offset: 2px;
}
.m365-activity[aria-expanded="true"] .m365-chevron { transform: rotate(90deg); }

/* The running label shimmers like the app's */
.m365-shimmer {
  background: linear-gradient(90deg, #6b7280 0%, #6b7280 40%, #d1d5db 50%, #6b7280 60%, #6b7280 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: m365-shimmer 1.6s linear infinite;
}

/* Answer and sources arrive line by line */
.m365-demo .m365-reveal {
  transition: opacity 600ms var(--m365-ease), transform 600ms var(--m365-ease), filter 600ms var(--m365-ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.m365-demo[data-state="pending"] .m365-reveal,
.m365-demo[data-state="searching"] .m365-reveal {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(3px);
  transition-delay: 0ms;
}

/* Citation chips, as in the app */
.m365-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-left: 0.1rem;
  border-radius: 0.375rem;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: 0.1em;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

/* Pointing at a citation highlights its source row (and the other way round) */
.m365-src { transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.m365-demo:has(.m365-cite[data-n="1"]:hover) .m365-src[data-n="1"],
.m365-demo:has(.m365-cite[data-n="2"]:hover) .m365-src[data-n="2"],
.m365-demo:has(.m365-cite[data-n="3"]:hover) .m365-src[data-n="3"],
.m365-src:hover {
  background-color: #ecf1f5;
  box-shadow: inset 0 0 0 1px rgba(18, 57, 99, 0.18);
}
.m365-demo:has(.m365-src[data-n="1"]:hover) .m365-cite[data-n="1"],
.m365-demo:has(.m365-src[data-n="2"]:hover) .m365-cite[data-n="2"],
.m365-demo:has(.m365-src[data-n="3"]:hover) .m365-cite[data-n="3"],
.m365-cite:hover {
  background: #123963;
  color: #fff;
}

/* Principles: a short primary rule leads each item's hairline */
.m365-principles > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: #123963;
}

/* Permission table disclosure: hide the default marker */
.m365-perms > summary { list-style: none; }
.m365-perms > summary::-webkit-details-marker { display: none; }

@keyframes m365-spin { to { transform: rotate(360deg); } }
@keyframes m365-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .m365-shimmer { animation: none; color: #6b7280; background: none; }
  .m365-demo .m365-reveal { transition: none; }
}