[x-cloak] { display: none !important; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], select, textarea {
  font-family: inherit;
}

/* Copilot side panel: on wide screens it docks beside the page instead of
   covering it, so the page the assistant is talking about stays visible. */
@media (min-width: 1024px) {
  body.copilot-open .app-shell { padding-right: 400px; }
}
@media print { body.copilot-open .app-shell { padding-right: 0; } }
.copilot-dot { animation: copilotBlink 1.2s infinite; font-size: 8px; }
.copilot-dot:nth-child(2) { animation-delay: .2s; }
.copilot-dot:nth-child(3) { animation-delay: .4s; }
@keyframes copilotBlink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Copilot button in the top bar: a pill with a slowly turning colour border
   and a glowing sparkle. Filled with the gradient while the panel is open. */
@property --copilot-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.copilot-btn {
  --copilot-grad: conic-gradient(from var(--copilot-angle), #a855f7, #6366f1, #06b6d4, #22d3ee, #a855f7);
  position: relative; display: inline-flex; height: 2.5rem; padding: 2px; border-radius: 9999px;
  background: var(--copilot-grad); animation: copilotSpin 6s linear infinite;
  box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); transition: box-shadow .25s, transform .15s;
}
.copilot-btn::before {
  content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: var(--copilot-grad); filter: blur(10px); opacity: .35; transition: opacity .25s;
  animation: copilotSpin 6s linear infinite;
}
.copilot-btn:hover::before, .copilot-btn:focus-visible::before { opacity: .7; }
.copilot-btn:hover { transform: translateY(-1px); }
.copilot-btn:active { transform: translateY(0); }
.copilot-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
.copilot-btn__inner {
  display: inline-flex; align-items: center; gap: .4rem; height: 100%;
  padding: 0 .9rem 0 .7rem; border-radius: inherit; background: #fff;
  font-size: .875rem; font-weight: 600; color: #312e81; transition: background .25s, color .25s;
}
.copilot-btn__spark {
  width: 1.15rem; height: 1.15rem;
  filter: drop-shadow(0 0 3px rgba(168, 85, 247, .7)) drop-shadow(0 0 6px rgba(6, 182, 212, .45));
  animation: copilotGlow 2.6s ease-in-out infinite;
}
.copilot-btn[aria-expanded="true"] .copilot-btn__inner {
  background: linear-gradient(120deg, #7c3aed, #4f46e5 50%, #0891b2); color: #fff;
}
.copilot-btn[aria-expanded="true"] .copilot-btn__spark .cm-line { stroke: #fff; }
.copilot-btn[aria-expanded="true"] .copilot-btn__spark .cm-spark { fill: #fff; }
.copilot-btn[aria-expanded="true"]::before { opacity: .6; }
@keyframes copilotSpin { to { --copilot-angle: 360deg; } }
@keyframes copilotGlow {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(168, 85, 247, .6)) drop-shadow(0 0 5px rgba(6, 182, 212, .35)); }
  50% { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 5px rgba(168, 85, 247, .95)) drop-shadow(0 0 10px rgba(6, 182, 212, .7)); }
}
@media (prefers-reduced-motion: reduce) {
  .copilot-btn, .copilot-btn::before, .copilot-btn__spark { animation: none; }
}
/* Copilot badge (panel header, replies): white tile, gradient F mark, soft glow. */
.copilot-badge {
  background: #fff;
  box-shadow: 0 0 0 1px #e0e7ff, 0 2px 12px -3px rgba(124, 58, 237, .55), 0 0 14px -6px rgba(6, 182, 212, .6);
}
.copilot-badge .copilot-mark { filter: drop-shadow(0 0 2px rgba(168, 85, 247, .45)); }
/* While the panel is open it has its own close button, so the top-bar button
   steps aside and gives the date / time its room back. */
body.copilot-open .copilot-btn { display: none; }