/* public/css/matt-ai-standalone.css
   Full-screen standalone "Matt's AI" app — the sphere hovers centered over
   a full-bleed background; a click drifts it to the top and expands a
   chat panel below. Self-contained (own tokens, own fonts via /fonts) so
   this page never depends on the corner-widget CSS. */

:root {
  --void: #0a0908;
  --panel: #141210;
  --panel-2: #1b1815;
  --ink: #f5f0e6;
  --ink-dim: #a89f92;
  --ink-faint: #5f584f;
  --red: #fa557a;
  --line: #2a241f;
  --gradient-brand: linear-gradient(135deg, #3b82f6 0%, #9b6fd1 33%, #d6409f 66%, #fa557a 100%);
  /* same 4 stops as --gradient-brand at reduced alpha — used anywhere the
     gradient fills a surface (buttons, active states, bubbles). Full
     saturation reads as loud on a UI this size; this is the "very
     subtle" version meant to sit as a soft tint over the dark glass
     panel rather than a bright color band. */
  --gradient-brand-subtle: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.38) 0%,
    rgba(155, 111, 209, 0.38) 33%,
    rgba(214, 64, 159, 0.38) 66%,
    rgba(250, 85, 122, 0.38) 100%
  );
  /* a single flat tone pulled from the gradient's midpoint — for borders,
     small text, and focus rings, where an actual 4-stop gradient isn't
     practical (border-color/text-color take one color, not a gradient) */
  --accent: #a377c9;
  /* the site's one "premium" easing curve — reused everywhere motion is
     meant to read as deliberate rather than mechanical (see the corner
     widget's ball transform transition) */
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  /* same frosted-glass recipe as the shop app's .glass class
     (components/shop/shop.module.css) — translucent panel color + blur +
     a warm hairline border — ported to this page's own --panel/--ink hues
     instead of the shop's peach-rose palette, since that's a different
     brand context */
  --glass-bg: rgba(20, 18, 16, 0.58);
  --glass-border: rgba(245, 240, 230, 0.16);
  --glass-border-strong: rgba(245, 240, 230, 0.22);
  --glass-surface: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* this is a single fixed scene, not a scrolling page */
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#mattAiRoot {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---- background ---- */

#maBackground {
  position: absolute;
  inset: 0;
  background-image: url('/assets/sphere_mattAI/TheBackGround.jpg');
  background-size: cover;
  background-position: center;
}

/* slow-drifting atmosphere behind the sphere — subtle, not decorative
   noise; loops via translateX so it never has a visible seam/jump */
#maCloud {
  position: absolute;
  top: 8%;
  left: -20%;
  width: 140%;
  max-width: none;
  opacity: 0.22;
  pointer-events: none;
  animation: maCloudDrift 50s ease-in-out infinite alternate;
  filter: blur(1px);
}

@keyframes maCloudDrift {
  from { transform: translateX(-3%); }
  to { transform: translateX(3%); }
}

/* ---- sphere ---- */

#maSphereStage {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: top 1.1s var(--ease-elegant), left 1.1s var(--ease-elegant), transform 1.1s var(--ease-elegant);
}

/* resting position once the chat is open — centered in the gap between
   the browser top and the chat panel, which starts at top:30% (see
   #maChatPanel below), so the sphere's own center sits at half that.
   On wide screens this is overridden to a left-side dock — see the
   min-width:1024px block near the end of this file. */
#mattAiRoot.ma-open #maSphereStage {
  top: 15%;
}

#maSphereWrap {
  position: relative;
  width: 165px;
  height: 165px;
  animation: maHover 4.5s ease-in-out infinite;
}

/* the hover loop is what's supposed to read as "waiting to be clicked" —
   pauses the instant the launch sequence starts so it doesn't fight the
   drift-to-top transform */
#mattAiRoot.ma-open #maSphereWrap,
#mattAiRoot.ma-launching #maSphereWrap {
  animation-play-state: paused;
}

@keyframes maHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

#maSphere {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  background-image: url('/assets/sphere_mattAI/MattAI.png');
  /* the source PNG's opaque circle doesn't quite reach its own square
     canvas edges (small transparent margin baked in, confirmed by raw
     pixel inspection), so background-size:cover left a thin transparent
     ring sitting right at this button's border-radius:50% clip boundary
     — the near-black page background showed through it as a dark ring
     around the sphere. Scaling past 100% here crops that margin away so
     only fully-opaque sphere pixels reach the clip edge. */
  background-size: 112%;
  background-position: center;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* Firefox draws its own dotted focus ring inside a button's padding box
   regardless of `outline` — this is the actual reset for that one */
#maSphere::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* real-hover devices only — on touch, :hover has no natural "unhover"
   moment, so this glow can get stuck lit after a single tap (Android
   Chrome/iOS Safari both do this) and reads as a stray colored ring
   baked onto the sphere instead of the interactive hover cue it's meant
   to be. Restricting it to (hover: hover) means touch never triggers it
   at all — mobile has no cursor to hover with in the first place. */
@media (hover: hover) and (pointer: fine) {
  #maSphere:hover {
    transform: scale(1.03);
    box-shadow:
      -10px -10px 32px 6px rgba(59, 130, 246, 0.5),
      10px 10px 32px 6px rgba(250, 85, 122, 0.5),
      0 0 56px 18px rgba(155, 111, 209, 0.3);
  }
}

/* Deliberately NOT a child of #maSphereStage — a real cast shadow stays
   pinned to the ground plane regardless of how high the object above it
   floats, so this is positioned independently against the floor visible
   in the background image rather than travelling with the sphere. That
   gap between sphere and shadow is what actually sells "floating." */
#maShadow {
  position: absolute;
  left: 50%;
  top: calc(60% + 99px);
  width: 227px;
  height: auto;
  transform: translate(-50%, 0) scale(1);
  transform-origin: center;
  opacity: 0.8;
  transition: opacity 0.9s var(--ease-elegant), transform 0.9s var(--ease-elegant), top 0.9s var(--ease-elegant), left 0.9s var(--ease-elegant);
  animation: maHoverShadow 4.5s ease-in-out infinite;
}

#mattAiRoot.ma-open #maShadow,
#mattAiRoot.ma-launching #maShadow {
  animation-play-state: paused;
}

/* the shadow shrinks and fades — but stays near the floor — as the
   sphere rises well above it, which is what actually reads as "lifting
   off the ground" rather than the sphere's own transform alone */
#mattAiRoot.ma-open #maShadow,
#mattAiRoot.ma-launching #maShadow {
  top: calc(58% + 99px);
  opacity: 0.3;
  transform: translate(-50%, 0) scale(0.55);
}

@keyframes maHoverShadow {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, 0) scale(0.9); opacity: 0.6; }
}

/* ---- chat panel ---- */

#maChatPanel {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(640px, 92vw);
  /* max-height is tied to the viewport (30% top + 70% here - 24px) so the
     panel always stops ~24px short of the bottom edge, whatever the height.
     Before, `62vh` was a fixed slice that — on a short viewport, or inside
     the homepage's fixed-height embedded AI section — left the panel's
     content taller than its box, so the Send row overflowed past
     `overflow:hidden` and was clipped. */
  max-height: min(600px, calc(70% - 24px));
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0) scale(0.85);
  transform-origin: top center;
  transition: opacity 0.7s var(--ease-elegant), transform 0.7s var(--ease-elegant);
}

#mattAiRoot.ma-open #maChatPanel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.ma-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
  letter-spacing: 0.02em;
}

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

#maClose {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
#maClose:hover { border-color: var(--accent); color: var(--accent); }

/* #maMessages scrolls; #maScrollArea is its positioned shell and hosts the
   custom scrollbar overlay (#maScrollbar) so the bar never scrolls with
   the content. */
#maScrollArea {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}

#maMessages {
  flex: 1;
  overflow-y: auto;
  /* right padding clears the 34px overlay scrollbar; left stays 22px */
  padding: 18px 46px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-height:0 (not a fixed floor) so this scrolling area yields space
     to the header / toggle / contact row / Send form when the panel is
     height-constrained. A fixed 220px floor here used to force those
     siblings — the Send row especially — out past the panel's clipped
     edge on short or embedded viewports. */
  min-height: 0;
  /* native scrollbar is fully replaced by the overlay below */
  scrollbar-width: none;
}
#maMessages::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- custom scrollbar overlay ----
   The up / down controls are the close button in another spot: identical
   34px glass circle, same accent-on-hover. Between them a fatter, clearly
   visible thumb you can actually grab and drag. Hidden entirely until
   there's something to scroll (JS toggles .ma-scrollable), and on touch
   (native scrolling is better there). */
#maScrollbar {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 8px;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#maScrollArea.ma-scrollable #maScrollbar { opacity: 1; }
#maScrollArea.ma-scrollable .ma-scroll-btn,
#maScrollArea.ma-scrollable #maScrollTrack { pointer-events: auto; }

.ma-scroll-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-surface);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.ma-scroll-btn svg { width: 15px; height: 15px; display: block; }
.ma-scroll-btn:hover { border-color: var(--accent); color: var(--accent); }
.ma-scroll-btn:active {
  background: var(--gradient-brand-subtle);
  border-color: transparent;
  color: var(--ink);
}
.ma-scroll-btn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }

#maScrollTrack {
  flex: 1 1 auto;
  width: 10px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.07);
  position: relative;
  cursor: pointer;
}

#maScrollThumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  border-radius: 999px;
  background: rgba(245, 240, 230, 0.34);
  min-height: 40px;
  cursor: grab;
  transition: background-color 0.18s ease, width 0.18s ease, left 0.18s ease;
}
#maScrollTrack:hover #maScrollThumb { background: rgba(245, 240, 230, 0.5); }
#maScrollArea.ma-dragging #maScrollThumb {
  background: var(--accent);
  cursor: grabbing;
  width: 12px;
  left: -1px;
}
#maScrollArea.ma-dragging { user-select: none; }

@media (max-width: 640px) {
  #maScrollbar { display: none; }
  #maMessages { padding: 18px 22px; }
}

.ma-bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 13px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ma-bubble.visitor { align-self: flex-end; background: var(--gradient-brand-subtle); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); }
.ma-bubble.ai { align-self: flex-start; background: var(--glass-surface); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ma-bubble.matt { align-self: flex-start; background: transparent; border: 1px solid var(--accent); color: var(--ink); }
.ma-bubble.matt::before {
  content: "Matt";
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}

/* full-strength gradient here, not the subtle translucent version — this
   is the same background-clip:text treatment the main site already uses
   for nav-link hover states, and at link-text size the full gradient
   reads as a signature accent rather than "loud"; the subtle variant is
   for filled surfaces (buttons, bubbles, toggle) where a solid block of
   saturated color would actually be loud */
.ma-link {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
  font-weight: 600;
}
.ma-link:hover {
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  text-decoration-color: var(--ink);
}

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

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

.ma-loading {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 13px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--ink-dim);
}
.ma-loading-dots { display: inline-flex; gap: 3px; }
.ma-loading-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-dim);
  animation: maLoadingBlink 1.2s ease-in-out infinite;
}
.ma-loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.ma-loading-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes maLoadingBlink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

#maAskMatt {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  margin: 0 22px 12px;
  align-self: flex-start;
}
#maAskMatt:hover { background: var(--gradient-brand-subtle); border-color: transparent; color: var(--ink); }

.ma-target-toggle {
  display: flex;
  gap: 6px;
  padding: 0 22px 12px;
}
.ma-target-toggle button {
  flex: 1;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ma-target-toggle button.active {
  background: var(--gradient-brand-subtle);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

#maCountdown {
  margin: 0 22px 12px;
  font-size: 12.5px;
  color: var(--ink-dim);
  font-family: 'Space Mono', monospace;
}
#maCountdown strong { color: var(--accent); }

.ma-contact-row {
  display: flex;
  gap: 10px;
  padding: 0 22px 10px;
}
.ma-contact-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  color: var(--ink);
  padding: 5px 2px;
  font-size: 12.5px;
  font-family: inherit;
}
.ma-contact-row input::placeholder { color: var(--ink-dim); }
.ma-contact-row input:focus { outline: none; border-bottom-color: var(--accent); }

#maInputForm {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--glass-border);
}
#maInput {
  flex: 1;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--ink);
  padding: 10px 16px;
  font-size: 14.5px;
  font-family: inherit;
}
#maInput:focus { outline: none; border-color: var(--accent); }
/* "translucent pearl" — a soft off-white glass pill rather than a solid
   opaque button, consistent with the rest of the panel's glass material */
#maInputForm button {
  background: rgba(245, 240, 230, 0.2);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--ink);
  border: 1px solid rgba(245, 240, 230, 0.32);
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#maInputForm button:hover { background: rgba(245, 240, 230, 0.3); }
#maInputForm button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  #maSphereWrap { width: 110px; height: 110px; }
  #maShadow { width: 140px; }
  #maChatPanel {
    top: auto;
    bottom: 0;
    left: 50%;
    width: 100vw;
    /* vh is the browser's LARGEST possible viewport (address bar
       collapsed) — when the address bar is actually showing, 78vh can
       be taller than what's really visible, pushing this panel's true
       top edge higher than the math below assumes. dvh tracks the real
       visible viewport as the toolbar shows/hides; vh stays first as a
       fallback for browsers that don't support dvh yet. */
    max-height: 78vh;
    max-height: 78dvh;
    border-radius: 20px 20px 0 0;
    transform: translate(-50%, 24px) scale(1);
  }
  #mattAiRoot.ma-open #maChatPanel {
    transform: translate(-50%, 0) scale(1);
  }
  /* centered in the strip above the panel (100% - 78% ≈ 22% tall) —
     was 9%, tighter than the desktop resting value, which is exactly
     backwards and is why the ball read as jammed under the browser
     chrome instead of sitting clear of it */
  #mattAiRoot.ma-open #maSphereStage { top: 14%; }
}

/* ---- wide screens: dock the sphere left, open the panel on the right ----
   On desktop there's plenty of horizontal room, so instead of stacking the
   sphere on top of a narrow centered panel, the sphere drifts to a left
   dock and the chat panel opens beside it — wider, and using the vertical
   space better (the homepage embed is wide but not tall). Tablet
   (641–1023px) keeps the stacked/centered layout; phones (≤640px) keep the
   bottom-sheet layout above. */
@media (min-width: 1024px) {
  #mattAiRoot.ma-open #maSphereStage {
    left: 25%;
    top: 50%;
  }
  #mattAiRoot.ma-open #maShadow {
    left: 25%;
  }

  #maChatPanel {
    /* centered in the gap between the docked sphere and the right edge of
       the viewport. The band runs from the sphere's right edge
       (≈ 25% + ~40px, half the sphere-stage width) to 100%, so its
       midpoint is ≈ 62.5% + 40px. Anchored by its own centre
       (translateX(-50%)) rather than pinned to the edge, so equal space
       falls on both sides instead of the panel hugging the browser edge. */
    left: calc(62.5% + 40px);
    right: auto;
    top: 50%;
    width: min(680px, 46vw);
    /* fixed height (not max-height) so the panel stays put as messages
       arrive — #maMessages is flex:1 + overflow-y:auto, so growth scrolls
       inside instead of reflowing the whole panel around its centered
       anchor */
    height: min(660px, calc(100% - 48px));
    max-height: calc(100% - 48px);
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
  }
  #mattAiRoot.ma-open #maChatPanel {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #maSphereWrap, #maShadow, #maCloud { animation: none !important; }
  #maSphereStage, #maChatPanel, #maShadow { transition-duration: 0.25s !important; }
}