/*
 * :host — visual customization API is INTENTIONALLY EMPTY.
 *
 * No CSS custom properties are exposed at this level. Any partner override
 * such as `evidenceone-chat { --eo-green: red; }` is shadowed by the
 * redeclaration on `.eo-scope` below, so it has no visual effect.
 *
 * Visual customization is allowed ONLY through these typed props:
 *   - button-size:  'sm' | 'md' | 'lg'
 *   - placement:    'right' | 'left'   (floating variant only)
 *   - variant:      'floating' | 'inline'
 *
 * Display behavior depends on variant:
 *   - floating: host is invisible (display: contents); trigger is position: fixed
 *   - inline:   host participates in document flow (display: inline-block)
 */
:host {
  display: inline-block;
}

:host([variant='floating']) {
  display: contents;
}

:host([variant='inline']) {
  display: inline-block;
}

/*
 * .eo-scope — INTERNAL token palette + inheritable-property lockdown.
 *
 * Declaring these tokens inside the shadow root shadows any external
 * override a partner might apply at :host or above. Custom properties
 * inherit through shadow DOM boundaries, so descendants (eo-drawer,
 * eo-chat, etc.) all resolve var(--eo-green) from this declaration.
 *
 * Explicit values for font-family / font-size / line-height / color /
 * letter-spacing / text-transform / text-align / font-style / font-weight
 * block inheritance of those properties from the partner's page styles.
 */
.eo-scope {
  /* Design tokens — "EvidenceOne Onboarding", light */
  --eo-bg: #ffffff;
  --eo-surface: #ffffff;
  --eo-sunken: #f5f6f4;
  --eo-text: #1d1d1b;
  --eo-text-2: #5a5a58;
  --eo-text-3: #6c6c6a;
  --eo-border: #e3e4e0;
  --eo-border-strong: #c9cac4;
  --eo-green: #50c878;
  --eo-green-hover: #34a85c;
  --eo-green-text: #1e7a40;
  --eo-green-soft: rgba(80, 200, 120, 0.12);
  --eo-on-green: #10240f;
  --eo-link: #1e7a40;
  --eo-danger: #b3261e;
  --eo-danger-soft: rgba(179, 38, 30, 0.08);
  --eo-shadow: 0 18px 44px rgba(29, 29, 27, 0.16);

  /* Theme-invariant brand constants — trigger chrome sits on the partner's
   * page and must not flip with the drawer theme. */
  --eo-dark: #1d1d1b;
  --eo-white: #ffffff;
  --eo-backdrop: rgba(0, 0, 0, 0.4);

  /* Locked font stack */
  --eo-font:
    system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Inheritable-property reset */
  font-family: var(--eo-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--eo-text);
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  font-style: normal;
  font-weight: 400;

  display: contents;
}

/* Dark palette — activated by the resolved `theme` prop (data-theme on
 * .eo-scope). Only tokens whose value differs from light are redeclared. */
.eo-scope[data-theme='dark'] {
  --eo-bg: #131312;
  --eo-surface: #1d1d1b;
  --eo-sunken: #262623;
  --eo-text: #f4f4f1;
  --eo-text-2: #b5b5b3;
  --eo-text-3: #9b9b99;
  --eo-border: #33332f;
  --eo-border-strong: #46463f;
  --eo-green-hover: #7adb9b;
  --eo-green-text: #7adb9b;
  --eo-green-soft: rgba(80, 200, 120, 0.14);
  --eo-link: #7adb9b;
  --eo-danger: #ff8a80;
  --eo-danger-soft: rgba(255, 138, 128, 0.1);
  --eo-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* ============================================================
 * Floating FAB — brand-dark circle with the E1 mark. Hover/focus
 * slides out the locked "Consultar EvidenceOne" pill toward
 * the inside of the screen (anchor-right grows left,
 * anchor-left grows right). The button itself is transparent;
 * the circle and the label pill are the two brand shapes.
 * ============================================================ */
.eo-fab {
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--eo-font);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.eo-fab__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--eo-dark);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(29, 29, 27, 0.35);
  transition: filter 120ms ease;
}

.eo-fab__mark svg {
  display: block;
}

.eo-fab:hover .eo-fab__mark {
  filter: brightness(1.08);
}

.eo-fab:active .eo-fab__mark {
  filter: brightness(0.95);
}

.eo-fab:focus-visible {
  outline: none;
}
.eo-fab:focus-visible .eo-fab__mark {
  outline: 2px solid var(--eo-green);
  outline-offset: 2px;
}

/* Label pill — collapsed to zero width until hover/keyboard focus.
 * The text node stays in the DOM at all times (integrity check reads
 * textContent); only its box is animated. */
.eo-fab__label {
  display: inline-flex;
  align-items: center;
  background: var(--eo-dark);
  color: var(--eo-white);
  border-radius: 9999px;
  line-height: 1;
  letter-spacing: 0.01em;
  max-width: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 220ms ease,
    padding 220ms ease,
    margin 220ms ease,
    opacity 180ms ease;
}

.eo-fab:hover .eo-fab__label,
.eo-fab:focus-visible .eo-fab__label {
  max-width: 340px;
  opacity: 1;
}

/* Growth direction — label sits on the inner side of the circle.
 * DOM order is label-then-mark: anchor-right keeps it (label left of
 * the circle); anchor-left reverses the row (label right of it). */
.eo-fab.eo-trigger--anchor-left {
  flex-direction: row-reverse;
}
.eo-fab.eo-trigger--anchor-right:hover .eo-fab__label,
.eo-fab.eo-trigger--anchor-right:focus-visible .eo-fab__label {
  margin-right: 12px;
}
.eo-fab.eo-trigger--anchor-left:hover .eo-fab__label,
.eo-fab.eo-trigger--anchor-left:focus-visible .eo-fab__label {
  margin-left: 12px;
}

/* Size variants — circle diameter tracks the inline pill heights;
 * the label pill is slightly shorter than the circle (Figma). */
.eo-fab.eo-trigger--sm .eo-fab__mark {
  width: 50px;
  height: 50px;
}
.eo-fab.eo-trigger--sm .eo-fab__mark svg {
  width: 26px;
  height: 26px;
}
.eo-fab.eo-trigger--sm .eo-fab__label {
  height: 26px;
  font-size: 12px;
}
.eo-fab.eo-trigger--sm:hover .eo-fab__label,
.eo-fab.eo-trigger--sm:focus-visible .eo-fab__label {
  padding: 0 14px;
}

.eo-fab.eo-trigger--md .eo-fab__mark {
  width: 66px;
  height: 66px;
}
.eo-fab.eo-trigger--md .eo-fab__mark svg {
  width: 34px;
  height: 34px;
}
.eo-fab.eo-trigger--md .eo-fab__label {
  height: 32px;
  font-size: 14px;
}
.eo-fab.eo-trigger--md:hover .eo-fab__label,
.eo-fab.eo-trigger--md:focus-visible .eo-fab__label {
  padding: 0 16px;
}

.eo-fab.eo-trigger--lg .eo-fab__mark {
  width: 80px;
  height: 80px;
}
.eo-fab.eo-trigger--lg .eo-fab__mark svg {
  width: 42px;
  height: 42px;
}
.eo-fab.eo-trigger--lg .eo-fab__label {
  height: 38px;
  font-size: 16px;
}
.eo-fab.eo-trigger--lg:hover .eo-fab__label,
.eo-fab.eo-trigger--lg:focus-visible .eo-fab__label {
  padding: 0 20px;
}

/* Floating-only — pin to viewport corner based on placement */
.eo-trigger--floating {
  position: fixed;
  bottom: 24px;
  z-index: 999997;
}
.eo-trigger--anchor-right {
  right: 24px;
}
.eo-trigger--anchor-left {
  left: 24px;
}

/* ============================================================
 * Inline pill — horizontal variant, brand-dark background, E1
 * mark. No hover/slide animation. Sits in document flow.
 * ============================================================ */
.eo-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--eo-dark);
  color: var(--eo-white);
  border: 0;
  border-radius: 9999px;
  font-family: var(--eo-font);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 120ms ease;
}

.eo-pill:hover {
  filter: brightness(1.08);
}

.eo-pill:active {
  filter: brightness(0.95);
}

.eo-pill:focus-visible {
  outline: 2px solid var(--eo-green);
  outline-offset: 2px;
}

.eo-pill__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eo-pill__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.eo-pill__label {
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Pill size variants — height + padding + glyph dimensions */
.eo-pill.eo-pill--sm {
  height: 36px;
  padding: 0 16px 0 10px;
  font-size: 13px;
}
.eo-pill.eo-pill--sm .eo-pill__mark {
  width: 20px;
  height: 20px;
}

.eo-pill.eo-pill--md {
  height: 44px;
  padding: 0 20px 0 12px;
  font-size: 15px;
}
.eo-pill.eo-pill--md .eo-pill__mark {
  width: 26px;
  height: 26px;
}

.eo-pill.eo-pill--lg {
  height: 54px;
  padding: 0 26px 0 16px;
  font-size: 18px;
}
.eo-pill.eo-pill--lg .eo-pill__mark {
  width: 32px;
  height: 32px;
}

/* Brand-integrity error state — replaces the trigger when L4b detects tampering */
.eo-integrity-error {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--eo-danger-soft);
  border: 1px solid var(--eo-danger);
  border-radius: 6px;
  color: var(--eo-danger);
  font-family: var(--eo-font);
  font-size: 13px;
  font-weight: 600;
}