/* ============================================================================
   DIGITAL GUIDE — Brand System 2026 skin.

   The Guide's own stylesheet (guide/ui/embed.css) is a shared, reusable module
   that still carries the previous light/emerald identity. This file re-skins
   the open chat panel for this site only: colours, typeface and logo. It does
   not touch layout, sizes, behaviour, copy or the module itself.

   Every rule is prefixed with #digital-flow-guide-root, which outranks the
   module's @scope rules whatever order the two files load in. Delete this file
   and its <link> and the panel returns to the module's default look.

   Palette: Carbon / Ink surfaces, Warm White / Cream text, Acid Green as the
   single accent. No other colours.
   ============================================================================ */

#digital-flow-guide-root .guide-widget,
#digital-flow-guide-root .guide-widget button,
#digital-flow-guide-root .guide-widget input {
  font-family: var(--df-font-sans, "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif);
}
#digital-flow-guide-root .guide-widget {
  color: #F2EEE6;
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, .7));
}

/* ------------------------------------------------------------------ shell */
#digital-flow-guide-root .guide-card {
  background: #1C1D1B;
  border: 1px solid rgba(244, 240, 231, .16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}

/* ----------------------------------------------------------------- header */
#digital-flow-guide-root .guide-header {
  background: #20211E;
  border-bottom: 1px solid rgba(244, 240, 231, .10);
}
/* The site's own .brand (header logo) is uppercase and letter-spaced; the
   Guide's .brand shares the class name, so those are reset here. */
#digital-flow-guide-root .guide-header .brand {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 400;
  color: #F2EEE6;
}
#digital-flow-guide-root .guide-header .brand-mark {
  width: 34px;
  height: 34px;
}
#digital-flow-guide-root .guide-header #guide-title {
  margin: 0;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
  color: #F2EEE6;
  opacity: 1;
}
#digital-flow-guide-root .guide-header .brand-title-secondary { color: #B6FF2E; }
#digital-flow-guide-root .guide-header #subtitle {
  margin: 4px 0 0;
  max-width: 22ch;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 240, 231, .62);
}

#digital-flow-guide-root .language {
  color: rgba(244, 240, 231, .62);
  font-weight: 500;
}
#digital-flow-guide-root .language:hover { background: rgba(242, 238, 230, .07); }
#digital-flow-guide-root .language.active {
  border-color: rgba(182, 255, 46, .42);
  background: rgba(182, 255, 46, .10);
  color: #B6FF2E;
}
#digital-flow-guide-root .language-flag { border-color: rgba(244, 240, 231, .18); }

#digital-flow-guide-root .guide-close { color: rgba(244, 240, 231, .76); }
#digital-flow-guide-root .guide-close:hover {
  background: rgba(242, 238, 230, .08);
  color: #F2EEE6;
}

/* --------------------------------------------------------------- messages */
#digital-flow-guide-root .messages { background: #1C1D1B; }
#digital-flow-guide-root .turn.guide {
  background: #272825;
  border: 1px solid rgba(244, 240, 231, .08);
  color: #F2EEE6;
}
#digital-flow-guide-root .turn.user {
  background: #B6FF2E;
  color: #1C1D1B;
  font-weight: 500;
}
#digital-flow-guide-root .takeaway {
  border-left-color: #B6FF2E;
  background: rgba(182, 255, 46, .07);
  color: rgba(244, 240, 231, .82);
}
#digital-flow-guide-root .takeaway strong { color: #B6FF2E; }
#digital-flow-guide-root .follow-up { color: rgba(244, 240, 231, .76); }

/* ------------------------------------------------------------ suggestions */
#digital-flow-guide-root .suggestions { background: #1C1D1B; }
#digital-flow-guide-root .suggestion {
  border-color: rgba(244, 240, 231, .22);
  background: transparent;
  color: #F2EEE6;
}
#digital-flow-guide-root .suggestion:hover {
  border-color: rgba(182, 255, 46, .6);
  background: rgba(182, 255, 46, .08);
  color: #F2EEE6;
}

/* --------------------------------------------------------------- composer */
#digital-flow-guide-root .composer {
  background: #20211E;
  border-top: 1px solid rgba(244, 240, 231, .10);
}
#digital-flow-guide-root .composer input {
  background: #161715;
  border-color: rgba(244, 240, 231, .18);
  color: #F2EEE6;
}
#digital-flow-guide-root .composer input::placeholder { color: rgba(244, 240, 231, .48); }
#digital-flow-guide-root .composer input:focus { border-color: #B6FF2E; }
#digital-flow-guide-root .composer button,
#digital-flow-guide-root .contact-primary {
  background: #B6FF2E;
  color: #1C1D1B;
  font-weight: 600;
}
#digital-flow-guide-root .composer button:hover,
#digital-flow-guide-root .contact-primary:hover { background: #c5ff54; }

/* ---------------------------------------------------------- contact offer */
#digital-flow-guide-root .contact-offer,
#digital-flow-guide-root .contact-panel {
  background: #232421;
  border-color: rgba(244, 240, 231, .12);
  color: #F2EEE6;
}
#digital-flow-guide-root .contact-panel h2 {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: 0;
  text-transform: none;
  color: #F2EEE6;
}
#digital-flow-guide-root .contact-offer p { color: #F2EEE6; }
#digital-flow-guide-root .contact-panel p { color: rgba(244, 240, 231, .72); }
#digital-flow-guide-root .contact-actions button {
  background: rgba(242, 238, 230, .08);
  color: #F2EEE6;
  font-weight: 600;
}
#digital-flow-guide-root .contact-actions button.primary {
  background: #B6FF2E;
  color: #1C1D1B;
}
#digital-flow-guide-root .contact-actions button.selected { outline-color: #B6FF2E; }
#digital-flow-guide-root .contact-fallback { border-top-color: rgba(244, 240, 231, .12); }
#digital-flow-guide-root .contact-fallback a,
#digital-flow-guide-root .other-contact,
#digital-flow-guide-root .panel-close { color: #B6FF2E; }

/* ------------------------------------------------------------------ focus */
#digital-flow-guide-root .guide-launcher:focus-visible,
#digital-flow-guide-root .guide-close:focus-visible,
#digital-flow-guide-root .language:focus-visible,
#digital-flow-guide-root .suggestion:focus-visible,
#digital-flow-guide-root .composer input:focus-visible,
#digital-flow-guide-root .composer button:focus-visible,
#digital-flow-guide-root .contact-actions button:focus-visible {
  outline: 2px solid #B6FF2E;
  outline-offset: 3px;
}

/* ------------------------------------------------------------- stacking --
   The site header is fixed at z-index 1000 and the module opens the panel at
   101, so on phones (and short desktop windows) the header covered the top of
   the open chat, including part of its close button. The open panel now sits
   above the header. Position and size are unchanged. */
#digital-flow-guide-root .guide-widget { z-index: 1001; }