/* Finest Electric website chat.

   The same panel that runs on losnios.com, drawn on this site's own surface
   tokens. Backgrounds, hairlines and text read the High Voltage variables
   (--c-panel, --c-panel-2, --c-line, --c-primary), so the widget follows the
   page into dark mode with no second set of rules. The accent is the one
   thing it does not borrow; see the note on the amber below. */

.chatw {
  /* Surfaces follow the page, so the panel goes light and dark with it.
     The accent does NOT: the site is already blue almost everywhere, and a
     blue launcher on a blue page is both hard to find and hard to tell apart
     from the agency's own mark. Amber is the colour of the trade, it is the
     one hue the rest of the page never uses, and it takes near-black text at
     better than 8:1, which blue at this lightness cannot. */
  --chatw-surface: rgb(var(--c-panel));
  --chatw-line: rgb(var(--c-line));
  --chatw-in: rgb(var(--c-panel-2));
  --chatw-out: #f59e0b;
  --chatw-out-hover: #d97706;
  --chatw-on-out: #14110a;
  --chatw-ink: rgb(var(--c-primary));
  --chatw-muted: rgb(var(--c-muted));
  --chatw-soft: rgb(245 158 11 / 0.34);
  --chatw-glow: rgb(245 158 11 / 0.34);
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 1200; /* above the sticky header so the panel never slides under it */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* The page is Tailwind-reset, so these buttons need the basics restated.
   :where() holds the reset at zero specificity: a plain `.chatw button`
   selector outranks every single-class rule below it, which silently flattened
   the starter chips and the send button to transparent, padding-free text. */
.chatw :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.chatw svg { display: block; }

/* on the dark sheet the amber lifts a step so it stays bright against
   near-black, and the halo strengthens to match */
html.dark .chatw {
  --chatw-out: #fbbf24;
  --chatw-out-hover: #f59e0b;
  --chatw-on-out: #14110a;
  --chatw-soft: rgb(251 191 36 / 0.34);
  --chatw-glow: rgb(251 191 36 / 0.30);
}

/* the finished reply, read once by screen readers */
.chatw-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.chatw-launch {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--chatw-out);
  color: var(--chatw-on-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px var(--chatw-glow), 0 2px 8px rgb(0 0 0 / 0.18);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.chatw-launch:hover {
  background: var(--chatw-out-hover);
  transform: translateY(-1px);
}

.chatw-launch:active { transform: scale(0.96); }

.chatw-launch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--chatw-soft), 0 8px 28px var(--chatw-glow);
}

/* ---- the nudge ---- */

.chatw-teaser {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: min(300px, calc(100vw - 40px));
  padding: 12px 10px 12px 16px;
  background: var(--chatw-surface);
  color: var(--chatw-ink);
  border: 1px solid var(--chatw-line);
  border-radius: 0.75rem;
  box-shadow: 0 10px 34px rgb(0 0 0 / 0.16);
  transform-origin: bottom right;
  animation: chatw-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chatw-teaser-body {
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.42;
}

.chatw-teaser-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -2px -4px 0;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chatw-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chatw-teaser-x:hover { color: var(--chatw-ink); background: var(--chatw-in); }
.chatw-teaser-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--chatw-soft); }

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

.chatw-panel {
  width: min(384px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 124px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chatw-surface);
  color: var(--chatw-ink);
  border: 1px solid var(--chatw-line);
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.24);
  transform-origin: bottom right;
  animation: chatw-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chatw-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--chatw-line);
}

.chatw-avatar { position: relative; display: block; width: 38px; height: 38px; }

/* the bolt sits inside its disc, the way the header mark does */
.chatw-mark {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: var(--chatw-out);
  color: var(--chatw-on-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* presence dot, ringed in the panel surface so it reads on any background */
.chatw-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #22c55e;
  border: 2px solid var(--chatw-surface);
  animation: chatw-pulse 2.4s ease-out infinite;
}

.chatw-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.chatw-title {
  font-family: Archivo, Inter, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.014em;
}

.chatw-sub { font-size: 0.72rem; line-height: 1.35; color: var(--chatw-muted); }

/* the short notice that stands in for the policy: the policy says the rest */
.chatw-sub a {
  color: var(--chatw-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--chatw-line);
  transition: color 0.2s ease;
}

.chatw-sub a:hover { color: var(--chatw-out); text-decoration-color: currentColor; }

.chatw-x {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chatw-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chatw-x:hover { color: var(--chatw-ink); background: var(--chatw-in); }
.chatw-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--chatw-soft); }

/* ---- the conversation ended ---- */

.chatw-ended {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.chatw-ended p {
  margin: 0;
  max-width: 26ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--chatw-muted);
}

.chatw-restart {
  padding: 11px 20px;
  border-radius: 0.5rem;
  background: var(--chatw-out);
  color: var(--chatw-on-out);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.chatw-restart:hover { background: var(--chatw-out-hover); }
.chatw-restart:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--chatw-soft); }

/* ---- the conversation ---- */

.chatw-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.chatw-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--chatw-line) transparent;
}

.chatw-msg { flex-shrink: 0; display: flex; animation: chatw-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.chatw-msg.is-user { justify-content: flex-end; }

.chatw-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: var(--chatw-in);
  color: var(--chatw-ink);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chatw-msg.is-user .chatw-bubble {
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  background: var(--chatw-out);
  color: var(--chatw-on-out);
}

.chatw-dots {
  display: inline-flex;
  gap: 5px;
  padding: 18px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--chatw-in);
}

.chatw-dots i {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--chatw-muted);
  animation: chatw-blink 1.1s infinite ease-in-out;
}

.chatw-dots i:nth-child(2) { animation-delay: 0.18s; }
.chatw-dots i:nth-child(3) { animation-delay: 0.36s; }

/* ---- the opening: a greeting and a few ways to start ---- */

.chatw-hello { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

.chatw-starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 0 2px; }

.chatw-starter {
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid var(--chatw-line);
  background: var(--chatw-in);
  color: var(--chatw-muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chatw-starter:hover { color: var(--chatw-ink); border-color: var(--chatw-out); }
.chatw-starter:focus-visible { outline: none; border-color: var(--chatw-out); box-shadow: 0 0 0 3px var(--chatw-soft); }

.chatw-err {
  flex-shrink: 0;
  margin: 0;
  padding: 9px 12px;
  border-radius: 0.5rem;
  background: rgb(var(--c-ember) / 0.12);
  color: rgb(var(--c-ember));
  font-size: 0.78rem;
  line-height: 1.45;
}

/* ---- composer ---- */

.chatw-foot { flex: 0 0 auto; padding: 10px 14px 14px; border-top: 1px solid var(--chatw-line); }

.chatw-form {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 5px 5px 16px;
  min-height: 46px;
  border: 1px solid var(--chatw-line);
  border-radius: 1rem;
  background: var(--chatw-in);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chatw-form:focus-within {
  border-color: var(--chatw-out);
  box-shadow: 0 0 0 3px var(--chatw-soft);
}

/* the field grows with the draft: a hidden copy of the text sets the height,
   the textarea sits on top of it in the same grid cell */
.chatw-grow { flex: 1 1 auto; min-width: 0; display: grid; }

.chatw-grow::after,
.chatw-input {
  grid-area: 1 / 1 / 2 / 2;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 7px 0;
  max-height: 112px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chatw-grow::after { content: attr(data-value) " "; visibility: hidden; overflow: hidden; }

.chatw-input {
  resize: none;
  border: 0;
  background: transparent;
  color: var(--chatw-ink);
  caret-color: var(--chatw-out);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--chatw-line) transparent;
}

.chatw-input:focus { outline: none; }
.chatw-input::placeholder { color: var(--chatw-muted); opacity: 1; }

.chatw-send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--chatw-out);
  color: var(--chatw-on-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.chatw-send:hover { background: var(--chatw-out-hover); }
.chatw-send:active { transform: scale(0.94); }
.chatw-send:disabled { opacity: 0.4; cursor: default; transform: none; }
.chatw-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--chatw-soft); }

/* ---- motion ---- */

@keyframes chatw-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes chatw-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

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

@keyframes chatw-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .chatw-teaser,
  .chatw-panel,
  .chatw-msg { animation: none; }
  .chatw-dots i { animation: none; opacity: 0.7; }
  .chatw-dot { animation: none; }
}

/* ---- phones: the panel becomes the sheet, with the ground showing around it ---- */

@media (max-width: 640px) {
  .chatw.is-open { left: 10px; right: 10px; bottom: 10px; }
  .chatw.is-open .chatw-launch { display: none; }

  .chatw-panel {
    width: 100%;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    border-radius: 1rem;
  }
}