/* public/css/ai-agent-widget.css
   The glowing-ball AI agent widget. Scoped under #aiAgentWidgetRoot with
   its own CSS variables so it renders identically on every page,
   regardless of whether that page defines its own design tokens. */

#aiAgentWidgetRoot {
  --aiw-void: #0a0908;
  --aiw-panel: #141210f2;
  --aiw-panel-2: #1b1815;
  --aiw-ink: #f5f0e6;
  --aiw-ink-dim: #a89f92;
  --aiw-line: #2a241f;
  --aiw-red: #fa557a;
  --aiw-glow: #ffffff;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
}

/* hidden while the full-screen nav menu is open (see watchNavOverlay in
   ai-agent-widget.js) — visibility, not display, so layout/measurements
   stay intact and it reappears instantly the moment the menu closes */
#aiAgentWidgetRoot.ai-agent-nav-open {
  visibility: hidden;
}

/* hidden while a work.html plate lightbox is open (see watchLightbox in
   ai-agent-widget.js) — same visibility-only approach as ai-agent-nav-open */
#aiAgentWidgetRoot.ai-agent-lightbox-open {
  visibility: hidden;
}

#aiAgentOverlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 4, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.ai-agent-open #aiAgentOverlay {
  opacity: 1;
  pointer-events: auto;
}

#aiAgentBall {
  position: fixed;
  top: 0;
  left: 0;
  width: 79px;
  height: 79px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  background-image: url('/assets/sphere_mattAI/MattAI.png');
  background-size: cover;
  background-position: center;
  /* no glow at rest — only on hover or once the chat is open (below) */
  box-shadow: none;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s ease, height 0.45s ease,
    box-shadow 0.4s ease, opacity 0.4s ease-out;
  z-index: 2;
}

/* "scroll for more" cue — only reads as meaningful while the ball is
   resting at the hero anchor or the very bottom of the page; JS toggles
   the opacity, this just owns the fade transition and the fixed position
   relative to the ball itself, so it always travels with it. One on each
   side, 50px clear of the ball's edge, vertically centered on it.
   Hovering the ball pushes them further out as they fade — the :hover
   rule needs !important since it has to win over the inline opacity the
   scroll logic sets directly on the element. */
.ai-agent-ball-arrow {
  position: absolute;
  top: 50%;
  width: 30%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.ai-agent-ball-arrow-left {
  left: -50px;
  transform: translate(-100%, -50%) scaleX(-1);
}
.ai-agent-ball-arrow-right {
  right: -50px;
  transform: translate(100%, -50%);
}
#aiAgentBall:hover .ai-agent-ball-arrow {
  opacity: 0 !important;
}
#aiAgentBall:hover .ai-agent-ball-arrow-left {
  transform: translate(calc(-100% - 20px), -50%) scaleX(-1);
}
#aiAgentBall:hover .ai-agent-ball-arrow-right {
  transform: translate(calc(100% + 20px), -50%);
}

/* echoes the site's own brand gradient (135deg, blue > purple > magenta >
   pink) instead of a flat white glow — blue offset toward the gradient's
   start corner, pink toward its end corner, purple/magenta filling the
   middle as ambient glow */
#aiAgentBall:hover {
  box-shadow:
    -7px -7px 24px 4px rgba(59, 130, 246, 0.55),
    7px 7px 24px 4px rgba(250, 85, 122, 0.55),
    0 0 42px 14px rgba(155, 111, 209, 0.32);
}

.ai-agent-open #aiAgentBall {
  width: 118px;
  height: 118px;
  /* while a conversation is open, swap the idle white pulse for a
     slower color-cycling one so the ball visibly reads as "active" —
     cycles through the same brand gradient used elsewhere on the site */
  animation: aiw-active-pulse 3.6s ease-in-out infinite;
}

/* 20% smaller on mobile — matches MOBILE_BALL_BREAKPOINT in ai-agent-widget.js */
@media (max-width: 640px) {
  #aiAgentBall {
    width: 63px;
    height: 63px;
  }
  .ai-agent-open #aiAgentBall {
    width: 94px;
    height: 94px;
  }
}

@keyframes aiw-active-pulse {
  0% {
    box-shadow:
      0 0 22px 6px rgba(59, 130, 246, 0.55),
      0 0 48px 16px rgba(59, 130, 246, 0.28);
  }
  33% {
    box-shadow:
      0 0 26px 8px rgba(155, 111, 209, 0.6),
      0 0 54px 20px rgba(155, 111, 209, 0.3);
  }
  66% {
    box-shadow:
      0 0 26px 8px rgba(214, 64, 159, 0.6),
      0 0 54px 20px rgba(214, 64, 159, 0.3);
  }
  100% {
    box-shadow:
      0 0 22px 6px rgba(250, 85, 122, 0.55),
      0 0 48px 16px rgba(250, 85, 122, 0.28);
  }
}

#aiAgentPanel {
  position: fixed;
  top: 140px;
  left: 50%;
  width: min(420px, 92vw);
  max-height: min(560px, 74vh);
  background: var(--aiw-panel);
  border: 1px solid var(--aiw-line);
  border-radius: 16px;
  color: var(--aiw-ink);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.ai-agent-open #aiAgentPanel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.ai-agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--aiw-line);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.ai-agent-panel-header strong {
  font-weight: 600;
}

#aiAgentClose {
  background: none;
  border: none;
  color: var(--aiw-ink-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

#aiAgentClose:hover {
  color: var(--aiw-ink);
}

#aiAgentMessages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  /* keep bubbles from reflowing sideways when the thread starts scrolling */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 240, 230, 0.22) transparent;
  transition: scrollbar-color 0.25s ease;
}
#aiAgentMessages:hover,
#aiAgentMessages:focus-within {
  scrollbar-color: rgba(250, 85, 122, 0.6) transparent;
}

/* custom scrollbar (WebKit / Blink) — slim floating pill, no arrow
   buttons, brightens on hover, goes brand-red while dragging. 3px
   transparent border + background-clip keeps the bar ~4px visible while
   the grab target stays 10px. */
#aiAgentMessages::-webkit-scrollbar {
  width: 10px;
}
#aiAgentMessages::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
#aiAgentMessages::-webkit-scrollbar-thumb {
  background-color: rgba(245, 240, 230, 0.16);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  min-height: 40px;
  transition: background-color 0.2s ease;
}
#aiAgentMessages:hover::-webkit-scrollbar-thumb {
  background-color: rgba(245, 240, 230, 0.32);
}
#aiAgentMessages::-webkit-scrollbar-thumb:hover {
  background-color: var(--aiw-red);
}
#aiAgentMessages::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.ai-agent-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ai-agent-bubble.visitor {
  align-self: flex-end;
  background: var(--aiw-red);
  color: #1a0a0e;
}

.ai-agent-bubble.ai {
  align-self: flex-start;
  background: var(--aiw-panel-2);
  border: 1px solid var(--aiw-line);
}

.ai-agent-bubble.matt {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--aiw-red);
  color: var(--aiw-ink);
}

.ai-agent-link {
  color: var(--aiw-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.ai-agent-link:hover {
  color: var(--aiw-ink);
}

.ai-agent-bubble.matt::before {
  content: "Matt";
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiw-red);
  margin-bottom: 3px;
}

.ai-agent-system-note {
  align-self: center;
  font-size: 11.5px;
  color: var(--aiw-ink-dim);
  text-align: center;
  padding: 2px 8px;
}

.ai-agent-loading {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--aiw-panel-2);
  border: 1px solid var(--aiw-line);
  font-size: 12.5px;
  color: var(--aiw-ink-dim);
}

.ai-agent-loading-dots {
  display: inline-flex;
  gap: 3px;
}

.ai-agent-loading-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aiw-ink-dim);
  animation: aiw-loading-blink 1.2s ease-in-out infinite;
}

.ai-agent-loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-agent-loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes aiw-loading-blink {
  0%, 80%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

#aiAgentAskMatt {
  background: transparent;
  border: 1px solid var(--aiw-red);
  color: var(--aiw-red);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0 16px 10px;
  align-self: flex-start;
}

#aiAgentAskMatt:hover {
  background: var(--aiw-red);
  color: #1a0a0e;
}

.ai-agent-to-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 3px;
}

.ai-agent-target-toggle {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
}

.ai-agent-target-toggle button {
  flex: 1;
  background: var(--aiw-panel-2);
  border: 1px solid var(--aiw-line);
  color: var(--aiw-ink-dim);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-agent-target-toggle button.active {
  background: var(--aiw-red);
  border-color: var(--aiw-red);
  color: #1a0a0e;
  font-weight: 600;
}

#aiAgentCountdown {
  margin: 0 16px 10px;
  font-size: 12px;
  color: var(--aiw-ink-dim);
  font-family: "Space Mono", monospace;
}

#aiAgentCountdown strong {
  color: var(--aiw-red);
}

.ai-agent-contact-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
}

.ai-agent-contact-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--aiw-line);
  color: var(--aiw-ink);
  padding: 4px 2px;
  font-size: 12px;
  font-family: inherit;
}

.ai-agent-contact-row input::placeholder {
  color: var(--aiw-ink-dim);
}

.ai-agent-contact-row input:focus {
  outline: none;
  border-bottom-color: var(--aiw-red);
}

#aiAgentInputForm {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--aiw-line);
}

#aiAgentInput {
  flex: 1;
  background: var(--aiw-panel-2);
  border: 1px solid var(--aiw-line);
  border-radius: 999px;
  color: var(--aiw-ink);
  padding: 9px 15px;
  font-size: 13.5px;
  font-family: inherit;
}

#aiAgentInput:focus {
  outline: none;
  border-color: var(--aiw-red);
}

#aiAgentInputForm button {
  background: var(--aiw-ink);
  color: #14100e;
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

#aiAgentInputForm button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  #aiAgentPanel {
    top: auto;
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-height: 82vh;
    border-radius: 16px 16px 0 0;
    transform: translate(-50%, 24px);
  }
  .ai-agent-open #aiAgentPanel {
    transform: translate(-50%, 0);
  }
}