/*
  AI Without the Jargon — widget tokens. Served as /aiwj/tokens.css.

  Every rule here paints ONE of the runtime's own `.aiwj-*` elements, and every
  colour, corner and typeface in it comes from a `--aiwj-*` custom property the
  page sets on :root (widgets.md §2). Nothing in this file targets the page's
  markup, and nothing in it decides a layout the designer should own — the
  widgets sit in whatever box they were dropped into and take that page's look.

  The fallbacks are deliberately greyscale. If a page forgets a token the widget
  degrades to newsprint, never to somebody else's brand orange — a wrong colour
  on a customer's site is worse than no colour.

  House rules baked in here:
    · every control is at least 44px tall — one thumb, one tap, no zoom
    · focus is always visible, drawn in the accent
    · the honeypot is off-screen, never display:none (a bot must be able to
      fill it, which is the whole point)
    · day chips scroll sideways on a phone instead of stacking twelve deep
    · the chat panel becomes a full-width sheet below 640px
*/

/* ===========================================================================
   Shared furniture
   =========================================================================== */

.aiwj-heading {
  margin: 0 0 12px;
  font-family: var(--aiwj-font-head, var(--aiwj-font, system-ui, sans-serif));
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--aiwj-deep, #111111);
}

.aiwj-fine {
  margin: 8px 0 0;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--aiwj-muted, #6b6b6b);
}

.aiwj-loading {
  margin: 0;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.9rem;
  color: var(--aiwj-muted, #6b6b6b);
}

/* ---- fields ------------------------------------------------------------- */

.aiwj-fields {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
}

.aiwj-field {
  display: block;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.aiwj-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aiwj-ink, #1a1a1a);
}

.aiwj-input,
.aiwj-select,
.aiwj-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;              /* 16px keeps iOS from zooming the page on focus */
  line-height: 1.4;
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
  -webkit-appearance: none;
  appearance: none;
}

.aiwj-textarea {
  min-height: 88px;
  resize: vertical;
}

.aiwj-select {
  /* No custom arrow art: the native one is the one the phone's user knows. */
  -webkit-appearance: menulist;
  appearance: menulist;
}

.aiwj-input::placeholder,
.aiwj-textarea::placeholder {
  color: var(--aiwj-muted, #6b6b6b);
  opacity: 0.7;
}

/* ---- buttons ------------------------------------------------------------ */

.aiwj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 11px 20px;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
  border: 1px solid var(--aiwj-accent, #1a1a1a);
  border-radius: var(--aiwj-radius, 4px);
  cursor: pointer;
}

.aiwj-btn:hover { filter: brightness(0.94); }

.aiwj-btn[disabled] {
  cursor: default;
  opacity: 0.6;
  filter: none;
}

.aiwj-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.85rem;
  color: var(--aiwj-muted, #6b6b6b);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.aiwj-toggle:hover { color: var(--aiwj-ink, #1a1a1a); }

/* ---- focus -------------------------------------------------------------- */
/* One ring, drawn in the accent, on everything the runtime makes. A keyboard
   user has to be able to see where they are or the widget is unusable. */

.aiwj-input:focus-visible,
.aiwj-select:focus-visible,
.aiwj-textarea:focus-visible,
.aiwj-btn:focus-visible,
.aiwj-toggle:focus-visible,
.aiwj-day:focus-visible,
.aiwj-window:focus-visible,
.aiwj-compare-handle:focus-visible,
.aiwj-chat-launcher:focus-visible,
.aiwj-chat-close:focus-visible,
.aiwj-chat-input:focus-visible,
.aiwj-attr-link:focus-visible {
  outline: 3px solid var(--aiwj-accent, #1a1a1a);
  outline-offset: 2px;
}

/* Older engines with no :focus-visible still get a ring rather than nothing. */
.aiwj-compare-handle:focus { outline: 3px solid var(--aiwj-accent, #1a1a1a); outline-offset: 2px; }

/* ---- validation --------------------------------------------------------- */

.aiwj-invalid,
.aiwj-invalid:focus {
  border-color: var(--aiwj-deep, #111111);
  box-shadow: inset 0 0 0 1px var(--aiwj-deep, #111111);
}

.aiwj-error {
  margin: 6px 0 0;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--aiwj-deep, #111111);
}

/* The honeypot. Off-screen, never display:none and never hidden — a bot that
   cannot see it cannot fill it, and a filled one is how we drop it silently. */
.aiwj-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---- success ------------------------------------------------------------ */

.aiwj-success {
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
  padding: 20px;
}

.aiwj-success > :first-child { margin-top: 0; }
.aiwj-success > :last-child { margin-bottom: 0; }

/* ===========================================================================
   §4 Booking
   =========================================================================== */

.aiwj-booking {
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--aiwj-ink, #1a1a1a);
}

.aiwj-days {
  display: flex;
  gap: 8px;
  /* On a phone twelve chips stacked is a scroll to nowhere, so the row scrolls
     sideways instead and the page never gains a horizontal scrollbar. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.aiwj-day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 68px;
  min-height: 60px;
  padding: 8px 10px;
  font-family: inherit;
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
  cursor: pointer;
}

.aiwj-day-wd { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aiwj-muted, #6b6b6b); }
.aiwj-day-date { font-size: 0.95rem; font-weight: 700; }

.aiwj-day.is-on {
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
  border-color: var(--aiwj-accent, #1a1a1a);
}

.aiwj-day.is-on .aiwj-day-wd { color: var(--aiwj-accent-ink, #ffffff); opacity: 0.85; }

.aiwj-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aiwj-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 14px;
  font-family: inherit;
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
  cursor: pointer;
}

.aiwj-window-label { font-size: 0.95rem; font-weight: 600; }
.aiwj-window-time { font-size: 0.75rem; color: var(--aiwj-muted, #6b6b6b); }

.aiwj-window.is-on {
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
  border-color: var(--aiwj-accent, #1a1a1a);
}

.aiwj-window.is-on .aiwj-window-time { color: var(--aiwj-accent-ink, #ffffff); opacity: 0.85; }

@media (min-width: 640px) {
  /* Room to see the whole fortnight at once — no scrolling on a desktop. */
  .aiwj-days { flex-wrap: wrap; overflow-x: visible; }
}

/* ===========================================================================
   §6 Calculator
   =========================================================================== */

.aiwj-calc {
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--aiwj-ink, #1a1a1a);
}

.aiwj-calc-fields { display: grid; gap: 12px; }

.aiwj-calc-pair {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

/* The runtime hides things with the `hidden` property, and a `display` of our
   own would quietly beat the browser's [hidden] rule — so every class here
   that sets display says what hidden means for itself. Scoped to our own
   classes: a blanket [hidden] rule would reach into the page's markup. */
.aiwj-calc-pair[hidden],
.aiwj-calc-direct[hidden] { display: none; }

.aiwj-calc-out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
}

.aiwj-calc-out-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aiwj-muted, #6b6b6b);
}

.aiwj-figure {
  font-family: var(--aiwj-font-head, var(--aiwj-font, system-ui, sans-serif));
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--aiwj-deep, #111111);
}

.aiwj-calc-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--aiwj-muted, #6b6b6b);
}

/* ===========================================================================
   §7 Reviews
   =========================================================================== */

.aiwj-reviews {
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--aiwj-ink, #1a1a1a);
}

.aiwj-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.aiwj-rating { font-weight: 700; }
.aiwj-review-count { font-size: 0.9rem; color: var(--aiwj-muted, #6b6b6b); }

.aiwj-sample {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-muted, #6b6b6b);
  border-radius: var(--aiwj-radius, 4px);
}

.aiwj-stars { display: inline-flex; gap: 2px; line-height: 0; }

.aiwj-star {
  width: 16px;
  height: 16px;
  /* An empty star is the same shape at low contrast — never a different glyph. */
  fill: var(--aiwj-line, #dcdcdc);
}

.aiwj-star.is-on { fill: var(--aiwj-accent, #1a1a1a); }

.aiwj-review-list { display: grid; gap: 16px; }

.aiwj-reviews--grid .aiwj-review-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.aiwj-review {
  margin: 0;
  padding: 16px;
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
}

.aiwj-review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.aiwj-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
  border-radius: 50%;
}

.aiwj-review-author { font-weight: 600; margin-right: auto; }

.aiwj-review-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.aiwj-review-date {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--aiwj-muted, #6b6b6b);
}

.aiwj-attr {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--aiwj-muted, #6b6b6b);
}

.aiwj-attr-link {
  color: inherit;
  text-underline-offset: 3px;
}

/* ===========================================================================
   §8 Before / after slider
   =========================================================================== */

/* The only place the runtime owns layout: a slider that isn't clipped isn't a
   slider. Size, aspect ratio, radius and surroundings stay the designer's. */
.aiwj-compare {
  position: relative;
  overflow: hidden;
  touch-action: none;           /* a drag must not scroll the page under it */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.aiwj-compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.aiwj-compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--aiwj-split, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--aiwj-surface, #ffffff);
  pointer-events: none;
}

.aiwj-compare-handle {
  position: absolute;
  top: 50%;
  left: var(--aiwj-split, 50%);
  width: 44px;                  /* one thumb, exactly */
  height: 44px;
  margin: -22px 0 0 -22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aiwj-deep, #111111);
  background: var(--aiwj-surface, #ffffff);
  border: 2px solid var(--aiwj-surface, #ffffff);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: ew-resize;
}

.aiwj-compare-handle::before {
  /* Two arrowheads, drawn in text so there is no image to load. */
  content: "\2039\00a0\203A";
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.aiwj-compare-label {
  position: absolute;
  top: 10px;
  z-index: 1;
  padding: 5px 10px;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-deep, #111111);
  border-radius: var(--aiwj-radius, 4px);
  pointer-events: none;
}

.aiwj-compare-label--before { left: 10px; }
.aiwj-compare-label--after { right: 10px; }

/* ===========================================================================
   §9 Chat
   =========================================================================== */

.aiwj-chat-launcher {
  position: fixed;
  right: 16px;
  /* Lifted clear of a fixed mobile call/text bar; the page sets its height. */
  bottom: calc(16px + var(--aiwj-bar-height, 0px));
  z-index: 2147482000;
  min-height: 44px;
  padding: 11px 18px;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.aiwj-chat-panel {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--aiwj-bar-height, 0px));
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100% - 32px);
  max-height: 70vh;
  overflow: hidden;
  font-family: var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-paper, #f7f7f6);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}

/* Shut means shut. Without this the flex above outranks the browser's own
   [hidden] rule and an "invisible" panel sits over half the page eating taps. */
.aiwj-chat-panel[hidden] { display: none; }

.aiwj-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  background: var(--aiwj-deep, #111111);
}

.aiwj-chat-title {
  flex: 1 1 auto;
  font-family: var(--aiwj-font-head, var(--aiwj-font, system-ui, sans-serif));
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--aiwj-accent-ink, #ffffff);
}

.aiwj-chat-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--aiwj-accent-ink, #ffffff);
  background: none;
  border: 0;
  border-radius: var(--aiwj-radius, 4px);
  cursor: pointer;
}

.aiwj-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

.aiwj-msg {
  margin: 0;
  max-width: 88%;
  padding: 9px 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: var(--aiwj-radius, 4px);
  overflow-wrap: anywhere;
}

.aiwj-msg--bot {
  align-self: flex-start;
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
}

.aiwj-msg--user {
  align-self: flex-end;
  color: var(--aiwj-accent-ink, #ffffff);
  background: var(--aiwj-accent, #1a1a1a);
}

.aiwj-msg.aiwj-busy::after {
  content: "\2026";
  color: var(--aiwj-muted, #6b6b6b);
  animation: aiwj-pulse 1.1s ease-in-out infinite;
}

@keyframes aiwj-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .aiwj-msg.aiwj-busy::after { animation: none; }
}

.aiwj-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--aiwj-surface, #ffffff);
  border-top: 1px solid var(--aiwj-line, #dcdcdc);
}

.aiwj-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--aiwj-ink, #1a1a1a);
  background: var(--aiwj-surface, #ffffff);
  border: 1px solid var(--aiwj-line, #dcdcdc);
  border-radius: var(--aiwj-radius, 4px);
}

.aiwj-chat-send {
  flex: 0 0 auto;
  margin: 0;
  padding: 11px 16px;
}

@media (max-width: 639px) {
  /* A phone gets a sheet, not a floating card: full width, sitting on top of
     whatever fixed bar the page has. */
  .aiwj-chat-panel {
    left: 0;
    right: 0;
    bottom: var(--aiwj-bar-height, 0px);
    width: auto;
    max-width: none;
    max-height: 80vh;
    border-width: 1px 0 0;
    border-radius: 0;
  }
}

/* ===========================================================================
   Motion
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aiwj-days { scroll-behavior: auto; }
}


/* ===========================================================================
   Roof trace — the quote tool's signature visual (widgets.md §3b)

   The mount is the designer's box; everything inside it is ours. The colour
   is --aiwj-trace: the page's accent unless the page says otherwise. A dark
   accent should set a light tint of itself here — the line has to glow on an
   aerial photo. The eight-second loop: the beam scans, the outline draws
   itself corner to corner, the corners and the three readouts land, then it
   all fades and starts again. Reduced motion shows the finished trace.
   =========================================================================== */

.aiwj-roof {
  --_t: var(--aiwj-trace, var(--aiwj-accent, #ffffff));
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0b1f33;
  container-type: inline-size;
}
.aiwj-roof-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; margin: 0; border: 0; border-radius: 0; }
.aiwj-roof-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--_t) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--_t) 9%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.aiwj-roof-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aiwj-roof-stop { stop-color: var(--_t); }
.aiwj-roof-stop--edge { stop-opacity: 0; }
.aiwj-roof-stop--mid { stop-opacity: .28; }
.aiwj-roof-scan { animation: aiwj-roof-scan 8s linear infinite; }
.aiwj-roof-trace {
  fill: var(--_t); fill-opacity: 0;
  stroke: var(--_t); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 893; /* the polygon's perimeter */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--_t) 75%, transparent));
  animation: aiwj-roof-trace 8s linear infinite;
}
.aiwj-roof-node { fill: var(--_t); stroke: #fff; stroke-width: 1.5; }
.aiwj-roof-marks { opacity: 0; animation: aiwj-roof-marks 8s linear infinite; }
.aiwj-roof-chip {
  position: absolute; left: 12px;
  display: flex; align-items: center; gap: 6px;
  font: 800 clamp(9.5px, 2.1cqw, 12.5px)/1.2 var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: .05em; color: #eafffb;
  background: rgba(11, 31, 51, .85);
  border: 1px solid color-mix(in srgb, var(--_t) 50%, transparent);
  border-radius: 999px; padding: 4px 9px;
  opacity: 0; white-space: nowrap;
}
.aiwj-roof-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--_t); box-shadow: 0 0 6px var(--_t); }
.aiwj-roof-chip--1 { top: 12px; animation: aiwj-roof-c1 8s linear infinite; }
.aiwj-roof-chip--2 { top: calc(12px + 2.2em + 6px); animation: aiwj-roof-c2 8s linear infinite; }
.aiwj-roof-chip--3 { top: calc(12px + 4.4em + 12px); animation: aiwj-roof-c3 8s linear infinite; }
.aiwj-roof-attr {
  position: absolute; right: 8px; bottom: 6px;
  font: 400 8px/1 var(--aiwj-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: rgba(255, 255, 255, .72); text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
@keyframes aiwj-roof-scan {
  0% { transform: translateX(-120px); opacity: 1; }
  26% { transform: translateX(650px); opacity: 1; }
  27%, 100% { transform: translateX(650px); opacity: 0; }
}
@keyframes aiwj-roof-trace {
  0%, 5% { stroke-dashoffset: 893; fill-opacity: 0; opacity: 1; }
  33% { stroke-dashoffset: 0; fill-opacity: 0; }
  40%, 88% { stroke-dashoffset: 0; fill-opacity: .16; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; fill-opacity: 0; opacity: 0; }
}
@keyframes aiwj-roof-marks { 0%, 31% { opacity: 0; } 38%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes aiwj-roof-c1 { 0%, 36% { opacity: 0; transform: translateY(4px); } 41%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes aiwj-roof-c2 { 0%, 42% { opacity: 0; transform: translateY(4px); } 47%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes aiwj-roof-c3 { 0%, 48% { opacity: 0; transform: translateY(4px); } 53%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .aiwj-roof-scan { display: none; }
  .aiwj-roof-trace, .aiwj-roof-marks, .aiwj-roof-chip { animation: none; opacity: 1; }
  .aiwj-roof-trace { stroke-dashoffset: 0; fill-opacity: .16; }
}