/* CallPilot website concierge — staged assistant, picker, and section highlight. */

#callpilot-concierge {
  position: fixed;
  z-index: 2147483000;
  width: min(220px, 30vw);
  transition: inset 420ms cubic-bezier(.4, 0, .2, 1), width 420ms ease, opacity 240ms ease;
  pointer-events: auto;
}

#callpilot-concierge[data-position="bottom_right"]  { inset: auto 24px 24px auto; }
#callpilot-concierge[data-position="bottom_left"]   { inset: auto auto 24px 24px; }
#callpilot-concierge[data-position="center_stage"]  { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(320px, 60vw); }
#callpilot-concierge[data-position="side_right"]    { inset: 50% 24px auto auto; transform: translateY(-50%); }
#callpilot-concierge[data-position="side_left"]     { inset: 50% auto auto 24px; transform: translateY(-50%); }
#callpilot-concierge[data-position="minimized"]     { inset: auto 24px 24px auto; width: 72px; }

.concierge__stage {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  background: #e9ecef;
}

.concierge__caption {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(16, 20, 26, .92);
  color: #f2f5f8;
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

#callpilot-concierge[data-position="minimized"] .concierge__caption { display: none; }

/* Picker */
.concierge__picker-title {
  margin: 0 0 10px;
  font: 600 15px/1.4 ui-sans-serif, system-ui, sans-serif;
}

.concierge__picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

.concierge__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 9px;
  border: 1px solid rgba(128, 128, 128, .3);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}

.concierge__card:hover:not(:disabled) { border-color: #4493f8; }
.concierge__card:disabled { opacity: .45; cursor: not-allowed; }

.concierge__card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin-bottom: 7px;
}

.concierge__card span  { font-weight: 600; font-size: 13px; }
.concierge__card small { font-size: 11px; opacity: .7; }

/* Section highlight applied by SiteGuideTool. Always expires. */
.concierge-highlight {
  outline: 3px solid #4493f8 !important;
  outline-offset: 6px;
  border-radius: 10px;
  transition: outline-color 300ms ease;
}

@media (max-width: 767px) {
  #callpilot-concierge,
  #callpilot-concierge[data-position="center_stage"] {
    inset: auto 12px 12px auto;
    width: 132px;
    transform: none;
  }
  .concierge__caption { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #callpilot-concierge { transition: none; }
}

/* Visitor assistant switcher. The choice is session-only and never changes the
   operator's published default. */
.concierge__switch {
  margin-top: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(16, 20, 26, .82);
  color: #f2f5f8;
  font: 12px/1.3 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.concierge__switch:hover { border-color: #4493f8; }

.concierge__switch-panel {
  margin-top: 6px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 7px;
  border-radius: 10px;
  background: rgba(16, 20, 26, .95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.concierge__switch-option {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #f2f5f8;
  font: 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  padding: 0 0 4px;
  overflow: hidden;
}

.concierge__switch-option:hover { border-color: #4493f8; }

.concierge__switch-option img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin-bottom: 3px;
}

#callpilot-concierge[data-position="minimized"] .concierge__switch,
#callpilot-concierge[data-position="minimized"] .concierge__switch-panel { display: none; }

/* --- Runtime personalization overlays -------------------------------------
   Rendered over a reusable avatar plate so customer names and branding are
   never baked into a generated clip. Kept deliberately restrained: a realistic
   badge reads as competence, oversized labels read as a website widget. */

.concierge__stage { position: relative; }

.concierge__badge {
  position: absolute;
  /* Upper chest. Measured against the portrait framing (head ~top 25%, chest
     ~30-45%, clasped hands ~55-70%): sitting lower puts the badge on the
     subject's hands instead of their blazer. */
  left: 15%;
  bottom: 48%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(252, 253, 255, .94);
  border-left: 2.5px solid var(--brand-accent, #4493f8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  line-height: 1.1;
  transform: rotate(-1.2deg);   /* sits on fabric, not on glass */
  pointer-events: none;
  max-width: 42%;
}

.concierge__badge strong {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #12161c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concierge__badge span {
  font-size: 7.5px;
  color: #55606d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concierge__badge--lanyard {
  bottom: 41%;
  left: 40%;
  border-left: none;
  border-top: 3px solid var(--brand-accent, #4493f8);
  transform: rotate(1deg);
}

.concierge__badge--engraved {
  background: rgba(28, 32, 38, .9);
  border-left-color: var(--brand-accent, #4493f8);
}
.concierge__badge--engraved strong { color: #f4f7fa; }
.concierge__badge--engraved span   { color: #b7c1cd; }

/* Company signage: environment treatment low in the frame, never floating
   behind the person's head. */
.concierge__brand {
  position: absolute;
  right: 5%;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(3px);
  border-bottom: 2px solid var(--brand-accent, #4493f8);
  pointer-events: none;
  max-width: 58%;
}

.concierge__brand img { height: 13px; width: auto; object-fit: contain; display: block; }

.concierge__brand span {
  font: 600 8.5px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#callpilot-concierge[data-position="minimized"] .concierge__badge,
#callpilot-concierge[data-position="minimized"] .concierge__brand { display: none; }

/* Identity plate: stable by construction because it lives OUTSIDE the video
   frame. A DOM element cannot track a torso moving inside a clip, so this is
   the default treatment and the on-body badge is opt-in/experimental. */
.concierge__plate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(16, 20, 26, .93);
  border-left: 3px solid var(--brand-accent, #4493f8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.concierge__plate img { height: 20px; width: auto; max-width: 46px; object-fit: contain; display: block; }
.concierge__plate strong { display: block; font-size: 13px; font-weight: 650; color: #f4f7fa; line-height: 1.2; }
.concierge__plate span {
  display: block;
  font-size: 10.5px;
  color: #a9b4c0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

#callpilot-concierge[data-position="minimized"] .concierge__plate { display: none; }