/* Geonergy AI assistant - launcher, slide-over panel, quote builder.
   Shared by index, store, calculator and inverter. Tokens come from
   geonergy.css; nothing here needs a framework or an icon font.

   The launcher is an icon button in the site header rather than a floating
   pill: the dock already owns the bottom of the screen, and the header is
   where people look for a tool that belongs to the site. */

/* ---------------------------------------------------------------
   LAUNCHER
   A round button in the site header carrying Geonergy's own mark.

   Two problems this shape solves. The header already shows that same sun
   in the wordmark, so a hairline outline read as the logo printed twice
   rather than as a control; a filled tint and a live dot make it a button.
   And it carries no label by design, so motion does the introducing: the
   sun comes up once on a first visit, and the mark answers the pointer.
   --------------------------------------------------------------- */
.ai-launch {
  position: relative;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(11, 29, 58, 0.10);
  background: rgba(11, 29, 58, 0.055);
  color: var(--navy, #0B1D3A); cursor: pointer;
  /* Sits after "Get in Touch", before the menu button, at every width - the
     DOM order puts it there and nothing reorders it. */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.ai-launch svg { width: 24px; height: auto; display: block; overflow: visible; }
.ai-launch:hover, .ai-launch.is-open {
  background: var(--navy, #0B1D3A); color: #FFFFFF;
  border-color: var(--navy, #0B1D3A);
  box-shadow: 0 6px 16px rgba(11, 29, 58, 0.22);
}
.ai-launch:hover { transform: translateY(-1px); }
.ai-launch:active { transform: scale(0.94); transition-duration: 0.09s; }
.ai-launch:focus-visible { outline: 2px solid #3DD68C; outline-offset: 3px; }
.ai-launch[hidden] { display: none; }

/* Live dot. Not a badge to be cleared - a quiet "there is something here",
   in the brand green, ringed so it holds on both the light and navy states. */
.ai-dot {
  position: absolute; top: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #3DD68C; border: 1.5px solid #FFFFFF;
  transition: border-color 0.2s ease;
}
.ai-launch:hover .ai-dot, .ai-launch.is-open .ai-dot { border-color: var(--navy, #0B1D3A); }

/* ---- the mark's own motion ---- */
.gm-rays, .gm-sun {
  transform-box: view-box; transform-origin: 12px 10.3px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-launch:hover .gm-rays { transform: rotate(7deg) scale(1.1); }
.ai-launch:hover .gm-sun { transform: translateY(-0.5px); }

@keyframes aiSunRise {
  from { transform: translateY(4px); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes aiRayFan {
  from { transform: rotate(-14deg) scale(0.45); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Two pulses, then it stops for good. */
@keyframes aiRing {
  0%   { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5); }
  70%  { box-shadow: 0 0 0 11px rgba(61, 214, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); }
}

/* The horizon never animates. Drawing it left the button empty for a
   quarter of a second, which reads as a glitch rather than a sunrise - and
   the ground is exactly the thing that should already be there when the sun
   comes up behind it. */
.ai-launch.is-intro { animation: aiRing 1.7s ease-out 2; }
.ai-launch.is-intro .gm-sun { animation: aiSunRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.ai-launch.is-intro .gm-rays { animation: aiRayFan 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }

/* Bottom-left corner. The dock is centred and its left edge sits at about
   half the leftover width, so above 460px there is clear room in the corner;
   below that the dock reaches across and the button lifts above it instead,
   staying on the left. Measured, not guessed: at 360px the dock starts 59px
   in, which a 52px button in the corner would run straight into. */
.ai-launch--float {
  position: fixed; left: 20px; bottom: 20px; right: auto; z-index: 95;
  width: 52px; height: 52px; background: var(--navy, #0B1D3A); color: #fff;
  border-color: var(--navy, #0B1D3A);
  box-shadow: 0 12px 32px rgba(11, 29, 58, 0.32), 0 2px 8px rgba(11, 29, 58, 0.20);
}
.ai-launch--float svg { width: 30px; }
@media (max-width: 460px) {
  /* Smaller on a phone: it floats over the page rather than beside it, and
     at 52px it covered too much of what is underneath. */
  .ai-launch--float { left: 14px; bottom: 90px; width: 44px; height: 44px; }
  .ai-launch--float svg { width: 26px; }
  .ai-launch--float .ai-dot { width: 8px; height: 8px; border-width: 1.5px; }
}
@media (max-width: 359px) {
  .ai-launch--float { width: 40px; height: 40px; }
  .ai-launch--float svg { width: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-launch, .gm-rays, .gm-sun { transition: none; }
  .ai-launch:hover, .ai-launch:active { transform: none; }
  .ai-launch:hover .gm-rays, .ai-launch:hover .gm-sun { transform: none; }
  .ai-launch.is-intro,
  .ai-launch.is-intro .gm-sun,
  .ai-launch.is-intro .gm-rays { animation: none; }
}

/* ---- panel ---- */
.ai-scrim {
  position: fixed; inset: 0; z-index: 99; background: rgba(11,29,58,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ai-scrim.open { opacity: 1; pointer-events: auto; }

.ai-panel {
  position: fixed; z-index: 100; display: flex; flex-direction: column;
  background: #fff; color: var(--text-on-white, #0B1D3A);
  font-family: var(--font-body, system-ui), sans-serif;
  right: 0; top: 0; bottom: 0; width: min(440px, 100vw);
  box-shadow: -18px 0 50px rgba(11,29,58,0.28);
  transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.ai-panel.open { transform: none; }
@media (max-width: 560px) {
  .ai-panel {
    left: 0; right: 0; top: auto; width: auto; height: 88vh;
    border-radius: 18px 18px 0 0; transform: translateY(100%);
    box-shadow: 0 -18px 50px rgba(11,29,58,0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-panel, .ai-scrim { transition: none; }
}

.ai-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1rem; border-bottom: 1px solid rgba(11,29,58,0.10);
  background: var(--navy, #0B1D3A); color: #EDF1F6; flex: none;
}
@media (max-width: 560px) { .ai-head { border-radius: 18px 18px 0 0; } }
.ai-head-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: rgba(61,214,140,0.18);
  color: #3DD68C;
}
.ai-head-mark svg { width: 22px; height: auto; }
.ai-head-text { flex: 1; min-width: 0; }
.ai-head-title { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.ai-head-sub { display: block; font-size: 0.72rem; color: #93A3BE; margin-top: 0.1rem; }
.ai-icon-btn {
  width: 34px; height: 34px; flex: none; border-radius: 9px; border: none;
  background: transparent; color: #EDF1F6; cursor: pointer;
  display: grid; place-items: center; transition: background 0.15s ease;
}
.ai-icon-btn:hover { background: rgba(237,241,246,0.14); }
.ai-icon-btn:focus-visible { outline: 2px solid #3DD68C; outline-offset: -2px; }
.ai-icon-btn svg { width: 18px; height: 18px; }
.ai-icon-btn.on { background: rgba(61,214,140,0.22); color: #3DD68C; }

.ai-log {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex;
  flex-direction: column; gap: 0.85rem; background: #F5F6F8;
  overscroll-behavior: contain;
}
.ai-msg { max-width: 92%; font-size: 0.9rem; line-height: 1.6; }
.ai-msg.you {
  align-self: flex-end; background: var(--navy, #0B1D3A); color: #fff;
  padding: 0.65rem 0.85rem; border-radius: 14px 14px 4px 14px;
}
.ai-msg.ai {
  align-self: flex-start; background: #fff; padding: 0.8rem 0.9rem;
  border-radius: 14px 14px 14px 4px; border: 1px solid rgba(11,29,58,0.10);
  box-shadow: 0 1px 2px rgba(11,29,58,0.04);
}
.ai-msg.ai p { margin: 0 0 0.55rem; }
.ai-msg.ai p:last-child { margin-bottom: 0; }
.ai-msg.ai strong { font-weight: 600; }
.ai-msg.ai ul { margin: 0.2rem 0 0.55rem; padding-left: 1.05rem; }
.ai-msg.ai li { margin-bottom: 0.2rem; }
.ai-msg.ai code {
  font-family: var(--font-mono, ui-monospace), monospace; font-size: 0.84em;
  background: rgba(11,29,58,0.06); padding: 0.1em 0.35em; border-radius: 4px;
}

.ai-src {
  margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid rgba(11,29,58,0.09);
  font-size: 0.72rem; color: #5B6B84; display: flex; gap: 0.4rem; align-items: flex-start;
}
.ai-src svg { width: 13px; height: 13px; flex: none; margin-top: 0.15rem; }
.ai-src a { color: #2C5590; text-decoration: underline; text-underline-offset: 2px; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.ai-chip {
  border: 1px solid rgba(11,29,58,0.16); background: #fff; color: #0B1D3A;
  border-radius: 999px; padding: 0.42rem 0.75rem; font-size: 0.78rem;
  cursor: pointer; font-family: inherit; transition: background 0.15s ease;
}
.ai-chip:hover { background: rgba(11,29,58,0.05); }
.ai-chip:focus-visible { outline: 2px solid #3DD68C; outline-offset: 1px; }

.ai-typing { display: inline-flex; gap: 3px; align-items: center; }
.ai-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: #93A3BE;
  animation: aiBlink 1.1s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: 0.16s; }
.ai-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes aiBlink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing i { animation: none; } }

/* ---- composer ---- */
.ai-foot { flex: none; border-top: 1px solid rgba(11,29,58,0.10); background: #fff; padding: 0.7rem; }
.ai-row { display: flex; align-items: flex-end; gap: 0.45rem; }
.ai-input {
  flex: 1; min-width: 0; resize: none; max-height: 110px;
  border: 1px solid rgba(11,29,58,0.18); border-radius: 12px;
  padding: 0.68rem 0.8rem; font-family: inherit; font-size: 0.9rem;
  line-height: 1.45; color: #0B1D3A; background: #fff;
}
.ai-input:focus-visible { outline: 2px solid #3DD68C; outline-offset: -1px; }
.ai-send, .ai-mic {
  width: 42px; height: 42px; flex: none; border-radius: 12px; border: none;
  cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease;
}
.ai-send { background: var(--navy, #0B1D3A); color: #fff; }
.ai-send:hover { background: #15305A; }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-mic { background: rgba(11,29,58,0.07); color: #0B1D3A; }
.ai-mic:hover { background: rgba(11,29,58,0.12); }
.ai-mic.live { background: #F2615A; color: #fff; animation: aiPulse 1.3s infinite; }
.ai-mic[hidden] { display: none; }
.ai-send svg, .ai-mic svg { width: 18px; height: 18px; }
.ai-send:focus-visible, .ai-mic:focus-visible { outline: 2px solid #3DD68C; outline-offset: 2px; }
@keyframes aiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,97,90,0.5); } 50% { box-shadow: 0 0 0 7px rgba(242,97,90,0); } }
@media (prefers-reduced-motion: reduce) { .ai-mic.live { animation: none; } }

.ai-note { font-size: 0.68rem; color: #5B6B84; margin-top: 0.5rem; line-height: 1.45; }

/* ---- quote builder ---- */
.ai-quote { background: #fff; border: 1px solid rgba(11,29,58,0.12); border-radius: 12px; padding: 0.85rem; }
.ai-quote h4 { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.55rem; }
.ai-loads {
  display: grid; gap: 0.3rem; max-height: 210px; overflow-y: auto;
  margin-bottom: 0.7rem; padding: 0.2rem 0.45rem 0.2rem 0.1rem;
  border: 1px solid rgba(11,29,58,0.10); border-radius: 9px;
  /* The list is longer than the box - the shadow at the bottom edge is the
     only thing that says so on a phone with no visible scrollbar. */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 24px no-repeat,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 24px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(11,29,58,0.13), rgba(11,29,58,0)) top / 100% 9px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(11,29,58,0.13), rgba(11,29,58,0)) bottom / 100% 9px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.ai-load {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
  padding: 0.3rem 0.1rem;
}
.ai-load > span:first-of-type { flex: 1; min-width: 0; }
.ai-stepper { flex: none; }
.ai-load em { font-style: normal; color: #5B6B84; font-size: 0.72rem; font-family: var(--font-mono, monospace); }
.ai-stepper { display: inline-flex; align-items: center; border: 1px solid rgba(11,29,58,0.16); border-radius: 8px; overflow: hidden; }
.ai-stepper button {
  width: 26px; height: 26px; border: none; background: transparent; cursor: pointer;
  font-size: 0.95rem; line-height: 1; color: #0B1D3A;
}
.ai-stepper button:hover { background: rgba(11,29,58,0.07); }
.ai-stepper output { width: 26px; text-align: center; font-size: 0.8rem; font-family: var(--font-mono, monospace); }
.ai-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(11,29,58,0.10); padding-top: 0.6rem; font-size: 0.82rem;
}
.ai-total strong { font-size: 1.05rem; font-family: var(--font-mono, monospace); }
.ai-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 100%; margin-top: 0.7rem; padding: 0.72rem 1rem; border-radius: 10px;
  background: #3DD68C; color: #06301C; font-weight: 600; font-size: 0.87rem;
  border: none; cursor: pointer; text-decoration: none; font-family: inherit;
}
.ai-cta:hover { background: #35c07d; }
.ai-cta svg { width: 17px; height: 17px; }
.ai-sum { margin-top: 0.15rem; }
.ai-sum .ai-total:first-child { border-top: none; padding-top: 0.2rem; }
.ai-msg.ai .ai-quote .ai-note { margin-top: 0.55rem; }
.ai-msg.ai .ai-cta { margin-top: 0.75rem; }
.ai-hours { border-top: 1px solid rgba(11,29,58,0.10); padding-top: 0.55rem; }

/* ---- side-by-side comparison ---- */
.ai-cmp {
  border: 1px solid rgba(11,29,58,0.14); border-radius: 10px;
  overflow: hidden; margin: 0.55rem 0 0.7rem; font-size: 0.8rem;
}
.ai-cmp-head {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--navy, #0B1D3A); color: #EDF1F6; font-weight: 600;
  /* Sticks to the top of the scrolling log, so you can still see which
     column is which eight rows down a long table. */
  position: sticky; top: 0; z-index: 1;
}
.ai-cmp-head span { padding: 0.5rem 0.6rem; line-height: 1.3; }
.ai-cmp-head span + span { border-left: 1px solid rgba(237,241,246,0.22); }
.ai-cmp-row { border-top: 1px solid rgba(11,29,58,0.09); }
.ai-cmp-row:first-of-type { border-top: none; }
.ai-cmp-key {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5B6B84; padding: 0.5rem 0.6rem 0.15rem;
}
.ai-cmp-vals { display: grid; grid-template-columns: 1fr 1fr; padding: 0 0 0.5rem; }
.ai-cmp-vals span { padding: 0 0.6rem; line-height: 1.45; }
.ai-cmp-vals span + span { border-left: 1px solid rgba(11,29,58,0.09); }
.ai-msg.ai .ai-cmp + p { margin-top: 0.6rem; }

/* ---------------------------------------------------------------
   PANEL MOTION
   Nothing decorative. Each piece of movement answers a question the
   customer would otherwise have to work out: what just opened, what is
   new since I last looked, and is it still thinking.
   --------------------------------------------------------------- */

/* The panel's own mark replays the sunrise each time it opens. That one is
   user-initiated, so it cannot nag. */
.ai-head-mark.is-rising .gm-sun { animation: aiSunRise 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
.ai-head-mark.is-rising .gm-rays { animation: aiRayFan 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

/* New messages rise into place, so a long answer arriving below the fold
   still reads as something that just happened. */
@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ai-msg { animation: aiMsgIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Suggestions arrive just after the answer they belong to, one after the
   other, so they read as offered rather than as part of the text. */
@keyframes aiChipIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.ai-chips .ai-chip { animation: aiChipIn 0.3s ease-out both; }
.ai-chips .ai-chip:nth-child(1) { animation-delay: 0.10s; }
.ai-chips .ai-chip:nth-child(2) { animation-delay: 0.17s; }
.ai-chips .ai-chip:nth-child(3) { animation-delay: 0.24s; }
.ai-chips .ai-chip:nth-child(4) { animation-delay: 0.31s; }
.ai-chips .ai-chip:nth-child(5) { animation-delay: 0.38s; }
.ai-chip { transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.ai-chip:hover { border-color: rgba(11, 29, 58, 0.34); transform: translateY(-1px); }
.ai-chip:active { transform: scale(0.97); }

/* A comparison table is the one answer that arrives as a block rather than
   as prose - its rows come in so the eye is led down them. */
@keyframes aiRowIn { from { opacity: 0; } to { opacity: 1; } }
.ai-cmp-row { animation: aiRowIn 0.3s ease-out both; }
.ai-cmp-row:nth-child(2) { animation-delay: 0.04s; }
.ai-cmp-row:nth-child(3) { animation-delay: 0.08s; }
.ai-cmp-row:nth-child(4) { animation-delay: 0.12s; }
.ai-cmp-row:nth-child(5) { animation-delay: 0.16s; }
.ai-cmp-row:nth-child(6) { animation-delay: 0.20s; }
.ai-cmp-row:nth-child(7) { animation-delay: 0.24s; }
.ai-cmp-row:nth-child(8) { animation-delay: 0.28s; }

/* The send button acknowledges the press; the quote's WhatsApp button is
   the end of the journey, so it gets a little more. */
.ai-send:active, .ai-mic:active, .ai-icon-btn:active { transform: scale(0.92); }
.ai-send, .ai-mic, .ai-icon-btn { transition: background 0.15s ease, transform 0.1s ease; }
.ai-cta { transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.ai-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(61, 214, 140, 0.35); }
.ai-cta:active { transform: scale(0.98); }

/* Stepper feedback in the quote builder: the figure it changes should be
   seen changing. */
.ai-stepper button { transition: background 0.14s ease, transform 0.1s ease; }
.ai-stepper button:active { transform: scale(0.88); }

@media (prefers-reduced-motion: reduce) {
  .ai-msg, .ai-chips .ai-chip, .ai-cmp-row,
  .ai-head-mark.is-rising .gm-sun,
  .ai-head-mark.is-rising .gm-rays { animation: none; }
  .ai-chip, .ai-send, .ai-mic, .ai-icon-btn, .ai-cta, .ai-stepper button { transition: none; }
  .ai-chip:hover, .ai-chip:active, .ai-cta:hover, .ai-cta:active,
  .ai-send:active, .ai-mic:active, .ai-icon-btn:active, .ai-stepper button:active { transform: none; }
}

/* ---- first-visit hint: Liquid Glass ----
   Apple's material, translated to what a browser can actually do. Four
   properties carry it and the rest is restraint:

     blur        - content behind is thrown out of focus
     saturate    - it picks colour up off whatever it is sitting over, which
                   is what separates it from flat frosted glass
     specular    - a bright hairline along the top edge and a rim around it,
                   so the material catches light and has an edge
     sheen       - one slow highlight sweep as it arrives, then never again

   Tinted navy rather than clear: it has to carry light text over both the
   white header and the navy hero, and clear glass would drop the contrast
   under 3.5:1 over white. At this alpha the worst case measures above 5:1.
   It hangs above the button and points down at it. */
.ai-hint {
  position: absolute; bottom: calc(100% + 13px); left: -2px;
  top: auto; right: auto; z-index: 96;
  display: block; width: max-content; max-width: min(236px, calc(100vw - 42px));
  padding: 0.62rem 0.95rem; border-radius: 999px;
  background: rgba(11, 29, 58, 0.70);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  color: #F2F6FB;
  font-family: var(--font-body, system-ui), sans-serif;
  font-size: 0.78rem; font-weight: 500; line-height: 1.4;
  text-align: left; letter-spacing: -0.005em; white-space: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 16px 38px rgba(11, 29, 58, 0.34),
    0 3px 10px rgba(11, 29, 58, 0.20);
  opacity: 0; transform: translateY(8px) scale(0.94); transform-origin: bottom left;
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 1.1, 0.36, 1);
}

/* The pointer: a clipped triangle flush under the capsule, not a rotated
   square overlapping it - two translucent layers stacked where they met and
   read as a dark notch. It carries its own blur, because a backdrop filter
   applies only to the element that declares it. */
.ai-hint::before {
  content: ''; position: absolute; bottom: -7px; left: 17px;
  top: auto; right: auto; width: 15px; height: 7px;
  background: inherit;
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* The sheen. Clipped to its own capsule rather than with overflow, which
   would take the pointer with it. */
.ai-hint::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.26) 47%,
    rgba(255, 255, 255, 0) 62%);
  -webkit-clip-path: inset(0 round 999px);
  clip-path: inset(0 round 999px);
}
@keyframes aiSheen {
  from { transform: translateX(-115%); opacity: 1; }
  to   { transform: translateX(115%); opacity: 1; }
}

.ai-hint.show { opacity: 1; transform: none; }
.ai-hint.show::after { animation: aiSheen 1.45s cubic-bezier(0.4, 0, 0.2, 1) 0.42s both; }

/* Liquid Glass reacts to the pointer. */
.ai-hint:hover { transform: translateY(-1px); }
.ai-launch:active .ai-hint { transform: scale(0.98); }

.ai-hint.is-calm { transition: none; opacity: 1; transform: none; }
.ai-hint.is-calm::after { animation: none; }

@media (max-width: 460px) {
  .ai-hint { max-width: min(220px, calc(100vw - 46px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-hint { transition: none; opacity: 1; transform: none; }
  .ai-hint::after { animation: none; }
  .ai-hint:hover, .ai-launch:active .ai-hint { transform: none; }
}