/**
 * ==============================================
 * Overlay for AI Concierge on customer page
 * ==============================================
 */
.aic_overlay {
  --color-main: #0073b6;
  --color-main-dark: #065380;
  --box-shadow: 0 2px 4px rgba(0,0,0,.25);
  --button-transition: background 0.5s ease-in-out;
  --button-bg: var(--color-main);
  --button-color: #fff;
  --button-hover-bg: var(--color-main-dark);
  --button-hover-color: var(--button-color);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  cursor: pointer;
  pointer-events: auto; }
  .aic_overlay .aic_iframe {
    width: 100%;
    height: 100%;
    border: none; }
  .aic_overlay .aic_wrapper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: auto; }
    @media (min-width: 500px) {
      .aic_overlay .aic_wrapper {
        min-height: 500px; } }
  .aic_overlay .aic_close-icon {
    transition: var(--button-transition);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--button-bg);
    color: var(--button-color);
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    box-shadow: var(--box-shadow); }
    .aic_overlay .aic_close-icon:before {
      position: relative;
      content: '\00D7';
      bottom: 9px; }
    .aic_overlay .aic_close-icon:hover, .aic_overlay .aic_close-icon:active {
      background: var(--button-hover-bg);
      color: var(--button-color); }

.aic_floating-icon {
  position: fixed;
  z-index: 999999;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  animation: hithere 3s ease infinite; }
  .aic_floating-icon:before {
    content: url("https://concierge.goodguys.ai/static/client/img/blue_ai_bell.svg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat; }

@keyframes hithere {
  10% {
    transform: scale(1.2); }
  13%, 20% {
    transform: rotate(-10deg) scale(1.2); }
  17% {
    transform: rotate(10deg) scale(1.2); }
  23% {
    transform: rotate(0deg) scale(1.2); }
  33% {
    transform: scale(1); }
  66% {
    transform: translateX(-3%); }
  100% {
    transform: translateX(0); } }