/**
 * AI chatbot — widget styling.
 *
 * Built on the theme's existing design tokens, so the widget inherits both
 * palettes (forge / singularity) with no values of its own. Colours are
 * never hardcoded here except for the shadow rgba values, which match the
 * rest of the stylesheet.
 *
 * Layout: a launcher pinned to the bottom-LEFT and a panel that grows upward
 * from it. On small screens the panel becomes a sheet so a phone keyboard
 * cannot clip it.
 *
 * The left edge is written physically (`left`), not logically. `inset-inline-`
 * `start` follows the reading direction, so in Hebrew it resolved to the RIGHT
 * side of the page while the same rule put the widget on the left in English —
 * two positions from one declaration. The shop owner asked for one position on
 * every page (2026-09-12), so the side is now fixed.
 *
 * The panel header carries no avatar badge. It used to hold a monogram — the
 * "X" initial of XmodZ in a filled accent circle — which the owner read as a
 * close icon, because the real close button (`×`) sits in the same row.
 * An inert glyph that looks like the primary action is a false affordance, so
 * the badge was removed (2026-09-12, v0.2.94); `.nxchat__identity` keeps its
 * `flex: 1 1 auto` and now simply fills the header.
 */

.nxchat {
  position: fixed;
  z-index: 900;
  /*
   * Bottom-anchored with the same expression whatsapp.css uses, so the two
   * floating buttons — one on each side of the page — stand on one line.
   *
   * These two disagreed until v0.3.07: this one sat at a flat 1.5rem while
   * WhatsApp sat at `--legal-bar-h + 1.25rem`, which parked the chat button
   * 41px lower and let its bottom 21px ride on top of the legal bar (this
   * widget is z-index 900; the bar is 45). `--legal-bar-h` is redeclared at
   * 5.5rem under 600px and then replaced by consent.js with the measured
   * height, so reading the token rather than a number keeps the two aligned
   * at every width and in every language.
   */
  inset-block-end: calc(var(--legal-bar-h) + 1.25rem);
  left: 1.5rem;
  right: auto;
  font-family: var(--font-body);
  /* Keep the widget isolated from any inherited page typography. */
  line-height: 1.5;
  color: var(--text);
}

/* ---------------------------------------------------------------- launcher */

/*
 * A round icon-only button, sized to land on the same 41.76px line as the
 * WhatsApp pill. Neither stylesheet knows about the other, so the height is a
 * hand-kept coupling and the arithmetic has to be shown:
 *
 *   whatsapp.css  = 0.68rem padding x2 + its 20px icon  = 41.76px
 *   this file     = 0.555rem padding x2 + this 24px icon = 41.76px
 *
 * The glyph here is deliberately larger than the pill's, because a robot face
 * needs the room: a 20px box cannot hold an antenna, a head and two eyes
 * without them fusing into one shape. The padding gives back exactly the 4px
 * the glyph takes, so the two buttons stay the same height. **Change one of
 * those two numbers without the other and the buttons stop lining up** — the
 * defect that took two versions to fix in v0.3.07. whatsapp.css's own 40rem
 * block changes its padding to 0.8rem, and the matching block at the foot of
 * this file changes this one to 0.675rem.
 *
 * The breathing animation is limited to `scale` on purpose. `scale` and
 * `translate` are independent properties, so the swell can run while the hover
 * lift moves the button underneath it; an animation on `transform` would have
 * frozen the lift for as long as it ran. It also animates `box-shadow`, which
 * is why the hover rule below sets only `translate` — a declaration the running
 * animation owns is simply ignored, and a dead shadow in the hover rule would
 * be worse than no shadow. The glow is part of that same `box-shadow`, which is
 * what keeps the halo and the swell perfectly in step: one animation, one clock.
 */
.nxchat__launcher {
  /*
   * The halo is a LIGHT BLUE on the light palette and WHITE on the dark one
   * (2026-09-15).
   *
   * White was the first instinct and it is the right instinct: the point of a
   * glow is that it is *light*, not that it belongs to the palette, so a
   * token-coloured halo would read as a second themed surface rather than as
   * light. It also survives on the dark palette, where the same white on
   * #120e0c is the maximum possible luminance jump and reads instantly.
   *
   * What it does not survive is a light palette. Measured against the light
   * register of the day as it stood (#ece8e2 page, #ffffff card — both
   * near-white; Forge has since moved its own surfaces down to limewash and
   * Aurora took the white back, and the argument is the same either way), a
   * white bloom is only ~12/255 away from what is already behind it — the glow
   * was being drawn, correctly, and could not be seen. Raising the alpha cannot
   * fix that: alpha can only push white further toward white. Colour can,
   * because it separates in HUE from a warm off-white and stays visible at a
   * lower intensity.
   *
   * So the light palette gets a pair of cyans whose alpha blends toward the page
   * and *lands* on תכלת. The owner asked for exactly this once he saw it: the
   * white screen keeps a glowing edge, it is simply no longer white.
   *
   * The hue is not invented (v0.3.10). The first blue pair was #1c91d6 /
   * #5db2e8 — hero blue, hue ~202° — and the owner's next note pointed at the
   * brand logo: the coolant in logo-white.webp is already the תכלת he means, so
   * the glow should be that colour rather than a neighbouring one. Sampled from
   * the asset (scripts/sample-logo-cyan.py, 18.5% of the logo's pixels are
   * coolant): the lit tube is #8fd4e6 at hue 192°, the highlight #97e3f3 at
   * 190°, and the shaded side #71a4ba at 198°. The coolant therefore LEADS with
   * cyan at hue ~190-194°, and the old pair sat about 9° too blue.
   *
   *   1. ring   #2fb0d8 — hue 193°, the coolant's hue. The bloom below carries
   *             the "glow" reading; this only has to give it an edge.
   *   2. bloom  #8fd4e6 — the logo's own lit tube, unchanged, because at 0.5
   *             alpha over the page it composites to the same pale cyan haze
   *             the tubes themselves throw.
   *
   * Both were chosen as an intent and then MEASURED, because "looks about
   * right" is how the white glow survived a round. Composited over the page
   * (scripts/measure-glow-contrast.py) the painted halo separates from
   * #ece8e2 like this:
   *
   *   v0.3.09 blue ring  #2695d7  2.70:1      v0.3.10 cyan ring  #38b3d8  2.00:1
   *   v0.3.09 blue bloom #a4cde5  1.38:1      v0.3.10 cyan bloom #bedee4  1.17:1
   *   the coolant's own lightness (#8fd4e6, opaque)                   1.35:1
   *
   * So the cyan pair sits LOWER than the blue it replaced, even though both
   * are 48% in HSL. Luminance is dominated by green, so a cyan-leading hue is
   * simply brighter than a blue-leading one at the same HSL lightness —
   * lightness was never the lever it looked like. The ring is still 1.5x the
   * coolant's own separation, so the glow stays visible; the alternative was
   * to darken it to ~#1896b9 to restore 2.70:1, and that reads as a deep teal
   * rather than as the bright coolant he pointed at. Hue from the brand, and
   * the brand's coolant is bright. If the halo ever needs to be stronger, move
   * the alpha — not the hue, and not back toward blue.
   *
   * Do not unify the palettes — they are deliberately different colours, not
   * two intensities of one colour — and do not re-blue these: he asked twice,
   * and the second time he named the logo.
   *
   * There are three registers now, and this block serves only the forge one
   * plus whatever has no attribute at all. Serving "the light palettes" — this
   * one AND aurora — was wrong for one version, and it is worth saying why: a
   * cyan halo around a green button is the forge register's light, not
   * aurora's. The owner said so plainly (the glow should be green in this
   * version), so every register now carries its own halo: white for the dark
   * palette and green for the bright one, both declared below.
   *
   * One halo colour per register, each taken from that register's own light.
   * Do not let this block go back to meaning "the light palettes".
   */
  --nxchat-glow: rgba(47, 176, 216, 0.95);
  --nxchat-halo: rgba(143, 212, 230, 0.5);

  display: inline-grid;
  place-items: center;
  padding: 0.555rem;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  cursor: pointer;
  /*
   * The rest state carries NO halo. A visitor who has asked the operating
   * system — or the accessibility panel — to stop animation must not be left
   * holding a permanent bloom: both suppression paths drop the animation
   * entirely, so whatever is declared here is what they see forever. The glow
   * lives only inside the keyframes.
   */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: translate 0.2s var(--ease);
  animation: nxchat-breathe 3s ease-in-out infinite;
}

/*
 * The dark palette keeps white, and it can afford to be quiet: the same white
 * on #120e0c is already a far bigger jump in luminance than any colour is on
 * #ece8e2, so a little alpha goes a long way. Raising these to the light
 * palette's values makes the button look like it is on fire rather than
 * breathing — which is why the two palettes diverge in colour AND intensity,
 * and why neither half of this pair should be "tidied" into the other.
 */
[data-theme="singularity"] .nxchat__launcher {
  --nxchat-glow: rgba(255, 255, 255, 0.6);
  --nxchat-halo: rgba(255, 255, 255, 0.22);
}

/*
 * The bright palette is the third register and it gets a third colour: green.
 *
 * This pair used to be hue 127, the hero footage's green, and it used to carry
 * a note explaining why it was NOT the brand art's hue 93 — a lime halo around
 * a green button reads as a second colour rather than as that button's own
 * light. That objection is gone because the accent moved: the owner sent his
 * wordmark and asked for the green to be taken out of it, so the button IS a
 * lime now, and a halo that disagreed with it would be the defect. Halo and
 * accent are the same hue here, and they are the art's.
 *
 * The pair is built the way the cyan pair is: a saturated ring that gives the
 * halo an edge, then a pale bloom that carries the "glow" reading. The ring is
 * not the fill — the fill is far too light to separate from a near-white page,
 * and luminance is dominated by green — it is the same hue taken down until it
 * does. Measured over aurora's --bg (#eef1ef), composited the way box-shadow
 * paints:
 *
 *   ring  rgba(106, 168, 50, 0.95)  -> #71ac3b over the page   2.42:1
 *   bloom rgba(172, 232, 128, 0.55) -> #caecb2 over the page   1.14:1
 *
 * against the cyan pair's 2.00:1 and 1.17:1 on the page it was drawn for, and
 * the 2.37:1 and 1.24:1 this block held before the hue moved. So the halo keeps
 * the strength it had and changes only its colour — which is what a re-hue
 * should do.
 *
 * scripts/_check-brand-hues.py gives aurora the band 80-140. It was written to
 * be wide enough to hold both greens at once, when the palette and its art
 * disagreed; now that the accent is hue 92.7 the band finally describes the
 * thing it checks rather than merely permitting it.
 *
 * The high-contrast register is knowingly left alone here. It repaints the disc
 * through --accent (#0b3d91) without redeclaring this pair, so a high-contrast
 * aurora visitor gets a blue disc with a lime halo. That is accepted rather
 * than overlooked: the halo carries no information, it is visible only while
 * the breathing animation runs, and both suppression paths remove it entirely.
 */
[data-theme="aurora"] .nxchat__launcher {
  --nxchat-glow: rgba(106, 168, 50, 0.95);
  --nxchat-halo: rgba(172, 232, 128, 0.55);
}

/*
 * The swell. Three shadows, and the count has to stay at three: a box-shadow
 * list only interpolates if both keyframes have the same length and the same
 * inset-ness, so adding a shadow to one end and not the other silently falls
 * back to a hard swap instead of a pulse.
 *
 *   1. the contact shadow that lifts the button off the page (all that
 *      survives with animation off)
 *   2. a tight ring of the glow colour, read as the hard edge of the halo
 *   3. a wide soft bloom that travels well past the button
 *
 * The bloom is what makes the halo "even bigger" than the button's own growth:
 * at the peak the button's radius gains ~2px, while the bloom reaches ~27px
 * beyond it. It is spread + blur rather than a scaled pseudo-element because a
 * shadow paints *behind* the element's own background and so cannot wash the
 * gradient, and because it needs no stacking-context trickery on a button that
 * already creates one while `scale` is running.
 *
 * Amplitude was 1.055 (a ~2.3px swell) until the owner said he could not see it
 * — and he was right: a 5.5% change over 3.6s is below the threshold of a
 * glance. It is now 10% over 3s, which is unmistakable without being restless.
 */
@keyframes nxchat-breathe {
  0%,
  100% {
    scale: 1;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.28),
      0 0 0 0 var(--nxchat-glow),
      0 0 0 0 var(--nxchat-halo);
  }

  50% {
    scale: 1.1;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.36),
      0 0 16px 5px var(--nxchat-glow),
      0 0 30px 12px var(--nxchat-halo);
  }
}

.nxchat__launcher:hover,
.nxchat__launcher:focus-visible {
  translate: 0 -2px;
  /*
   * Settle the breath while the pointer or the keyboard is on the button. A
   * 4px swell is small, but the visitor is aiming at it at exactly that moment,
   * and a target that keeps moving while you press it is the one thing a hit
   * target must not do. It also stops the button being permanently "unstable"
   * to any tool that waits for it to hold still.
   */
  animation-play-state: paused;
}

/*
 * The global ring in main.css is `2px solid var(--accent)`. This button's fill
 * is already a `--accent` -> `--accent-2` gradient, so the ring landed at
 * 1.00:1 against the surface it was drawn around: on the dark palette that is
 * #b53a3a ring on a #b53a3a button, a red blur rather than a focus indicator.
 * Measured, not guessed — the ring only read 3.32:1 against the page, and that
 * was against the sliver of page showing through the 2px offset gap.
 *
 * Recoloured to --text-bright, the same override .nxa11y__launcher and
 * .skip-link carry: 19.2:1 against the page, 5.3-5.8:1 against the gradient
 * at either end. Any future button painted with the accent gradient inherits
 * the same problem and needs the same line.
 */
.nxchat__launcher:focus-visible {
  outline-color: var(--text-bright);
}

/*
 * 24px, up from 20px in v0.3.08 — the glyph is drawn to fill its box, so this
 * number is what makes the robot face legible at rest. The button still stands
 * 41.76px tall because the launcher's padding gives back the 4px the glyph
 * takes; see the launcher rule above, where both halves of that arithmetic are
 * written down. Inside the circle the mark's furthest drawn point sits 12.4px
 * from the centre of a 20.88px radius, so it never crowds the rim even at the
 * top of the breath, when `scale` pushes the button out to 45.9px.
 */
.nxchat__launcher-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: block;
}

.nxchat[data-open="true"] .nxchat__launcher {
  display: none;
}

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

.nxchat__panel {
  position: absolute;
  /* Opens upward and to the right of the launcher — see the note on .nxchat. */
  inset-block-end: 0;
  left: 0;
  right: auto;
  display: flex;
  flex-direction: column;
  inline-size: min(24rem, calc(100vw - 2rem));
  block-size: min(34rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: nxchat-in 0.22s var(--ease);
}

.nxchat__panel[hidden] {
  display: none;
}

@keyframes nxchat-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.nxchat__header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--bg-elev);
}

.nxchat__identity {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.nxchat__title {
  font-weight: 700;
  font-size: 0.95rem;
}

.nxchat__status {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.nxchat__reset,
.nxchat__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
}

.nxchat__reset::before {
  content: "\21BB";
  font-size: 1rem;
}

.nxchat__reset:hover,
.nxchat__close:hover {
  color: var(--accent-text);
  background: var(--accent-subtle);
}

/* -------------------------------------------------------------- message log */

.nxchat__log {
  flex: 1 1 auto;
  /* Stated explicitly because a flex child defaults to min-size:auto. The
     transcript is the one region that may shrink, and the only one that
     scrolls — everything else in the panel has a fixed height. */
  min-block-size: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--surface);
}

.nxchat__msg {
  max-inline-size: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nxchat__msg--bot {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-start-start-radius: var(--radius-sm);
}

.nxchat__msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-start-end-radius: var(--radius-sm);
}

.nxchat__msg--error {
  align-self: stretch;
  background: transparent;
  border: 1px dashed var(--danger);
  color: var(--danger);
  font-size: 0.85rem;
  text-align: center;
}

.nxchat__msg--notice {
  align-self: stretch;
  background: var(--accent-subtle);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
}

/* Typing indicator: three dots that need no markup beyond one element. */
.nxchat__msg--thinking {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.nxchat__msg--thinking::before,
.nxchat__msg--thinking::after,
.nxchat__msg--thinking span {
  content: "";
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--text-dim);
  animation: nxchat-dot 1.1s infinite ease-in-out;
}

.nxchat__msg--thinking::after {
  animation-delay: 0.2s;
}

.nxchat__msg--thinking span {
  animation-delay: 0.4s;
}

@keyframes nxchat-dot {
  0%,
  60%,
  100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}

/* ----------------------------------------------------------- product cards */

.nxchat__products {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block-start: 0.5rem;
}

.nxchat__product {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.nxchat__product:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.nxchat__product-image {
  flex: 0 0 auto;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.nxchat__product-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}

.nxchat__product-name {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nxchat__product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.nxchat__product-price {
  color: var(--text);
  font-weight: 700;
}

.nxchat__product-stock[data-state="outofstock"] {
  color: var(--danger);
}

.nxchat__product-stock[data-state="instock"] {
  color: var(--ok-text);
}

/* ------------------------------------------------ bot verification mount */

/*
 * Turnstile is a technical mount, not part of the conversation, so it takes
 * no visual space. The container has to stay in the document (never
 * display:none, or the iframe cannot measure itself) but it is clipped out of
 * sight and out of the layout.
 *
 * Turnstile's own "invisible" mode is a property of the sitekey in the
 * Cloudflare dashboard, not something the page can ask for, so when Cloudflare
 * decides a human has to solve something, before-interactive-callback un-clips
 * the mount and the challenge becomes a visible row in the panel. Rare, and
 * solvable — which is the point.
 */
.nxchat__verify {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  inset-block-end: 0;
  inset-inline-start: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.nxchat__verify[data-interactive="true"] {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip-path: none;
  pointer-events: auto;
  padding: 0.5rem 0.8rem 0;
  background: var(--bg-elev);
  text-align: center;
}

/* ------------------------------------------------------------------- form */

.nxchat__form {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-block-start: 1px solid var(--border);
  background: var(--bg-elev);
}

.nxchat__input {
  flex: 1 1 auto;
  resize: none;
  max-block-size: 6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
}

.nxchat__input:focus {
  outline: 2px solid var(--accent-glow);
  border-color: var(--accent-ring);
}

.nxchat__send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}

.nxchat__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------------------------------------------- disclaimer */

.nxchat__disclaimer {
  margin: 0;
  padding: 0.55rem 0.9rem 0.7rem;
  border-block-start: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: start;
}

/* ------------------------------------------------------------- responsive */

/*
 * 40rem is the breakpoint whatsapp.css collapses its own pill at, and when it
 * does it changes three things at once: the bottom anchor drops from
 * `--legal-bar-h + 1.25rem` to `+ 0.9rem`, the edge comes in from 1.5rem to
 * 0.9rem, and the padding grows from 0.68rem to 0.8rem. All three are mirrored
 * here, or the two buttons stop lining up for the whole width band between
 * 30rem and 40rem.
 *
 * This one mirrors the third with 0.675rem rather than 0.8rem, because the
 * glyph here is 24px where the pill's is 20px: 0.675rem x2 + 24px = 45.6px,
 * which is exactly what whatsapp.css's 0.8rem x2 + 20px produces on the same
 * band. The two numbers look unrelated and are not.
 */
@media (max-width: 40rem) {
  .nxchat {
    inset-block-end: calc(var(--legal-bar-h) + 0.9rem);
    left: 0.9rem;
    right: auto;
  }

  .nxchat__launcher {
    padding: 0.675rem;
  }
}

@media (max-width: 30rem) {
  /* Position comes from the 40rem block above; repeating it here is what used
     to pull this button 0.9rem while WhatsApp stayed on the legal bar. */
  .nxchat__panel {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100vh;
    border-radius: 0;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nxchat__panel,
  .nxchat__launcher,
  .nxchat__product {
    animation: none;
    transition: none;
  }

  .nxchat__msg--thinking::before,
  .nxchat__msg--thinking::after,
  .nxchat__msg--thinking span {
    animation: none;
    opacity: 1;
  }
}