:root {
  --vasco-orange: #ff8a1f;
  --vasco-blue: #062b52;
  --vasco-blue-deep: #031a31;
  --vasco-cyan: #20d9ff;
  --vasco-text: #f7fbff;
  --vasco-muted: #b9c9d7;
}

.vasco-assistant {
  position: fixed;
  z-index: 2147482000;
  right: clamp(14px, 2.2vw, 34px);
  bottom: clamp(12px, 2.2vh, 28px);
  display: grid;
  grid-template-columns: minmax(250px, 370px) clamp(150px, 17vw, 260px);
  align-items: end;
  max-width: min(660px, calc(100vw - 28px));
  pointer-events: none;
  color: var(--vasco-text);
  font-family: Arimo;
}

.vasco-assistant[hidden] { display: none; }

.vasco-assistant__bubble {
  position: relative;
  margin: 0 -18px 38px 0;
  padding: 18px 48px 16px 20px;
  border: 1px solid rgba(255, 138, 31, .75);
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(145deg, rgba(6, 43, 82, .97), rgba(3, 26, 49, .98));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 0 22px rgba(235, 247, 255, .24),
    0 18px 44px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  pointer-events: auto;
}

.vasco-assistant__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: var(--vasco-text);
  background: rgba(255, 255, 255, .08);
  font: 400 var(--vasc-font-20)/1 Arimo;
  cursor: pointer;
}

.vasco-assistant__close:hover,
.vasco-assistant__close:focus-visible {
  border-color: rgba(255, 138, 31, .85);
  background: rgba(255, 138, 31, .18);
  outline: none;
}

.vasco-assistant__eyebrow {
  margin: 0 0 5px;
  color: var(--vasco-orange);
  font-size: var(--vasc-font-12);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vasco-assistant__title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 500;
  line-height: 1.15;
}

.vasco-assistant__message {
  margin: 9px 0 14px;
  color: var(--vasco-muted);
  font-size: var(--vasc-font-14);
  font-weight: 400;
  line-height: 1.48;
}

.vasco-assistant__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.vasco-assistant__button {
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: var(--vasco-text);
  background: rgba(255, 255, 255, .07);
  font: inherit;
  font-size: var(--vasc-font-12);
  font-weight: 500;
  cursor: pointer;
}

.vasco-assistant__button--primary {
  border-color: rgba(255, 138, 31, .85);
  background: rgba(255, 138, 31, .16);
}

.vasco-assistant__button:hover,
.vasco-assistant__button:focus-visible {
  border-color: rgba(255, 138, 31, .95);
  background: rgba(255, 138, 31, .24);
  outline: 2px solid rgba(32, 217, 255, .9);
  outline-offset: 2px;
}

.vasco-assistant__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  pointer-events: none;
}

.vasco-assistant.is-portrait-unavailable {
  grid-template-columns: minmax(250px, 370px);
}

.vasco-assistant.is-portrait-unavailable .vasco-assistant__bubble {
  margin-right: 0;
}

.vasco-assistant__figure {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  object-position: right bottom;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .95))
    drop-shadow(0 0 11px rgba(226, 245, 255, .72))
    drop-shadow(0 15px 16px rgba(0, 0, 0, .38));
}

.vasco-assistant[data-animation="rise"] { animation: vasco-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.vasco-assistant[data-animation="slide"] { animation: vasco-slide .48s cubic-bezier(.2,.8,.2,1) both; }
.vasco-assistant.is-leaving { animation: vasco-leave .24s ease-in both; }

@keyframes vasco-rise { from { opacity: 0; transform: translateY(46px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vasco-slide { from { opacity: 0; transform: translateX(55px); } to { opacity: 1; transform: none; } }
@keyframes vasco-leave { to { opacity: 0; transform: translateY(20px) scale(.98); } }

@media (max-width: 920px) {
  .vasco-assistant { grid-template-columns: minmax(220px, 330px) clamp(130px, 22vw, 200px); }
  .vasco-assistant.is-portrait-unavailable { grid-template-columns: minmax(220px, 330px); }
  .vasco-assistant__figure { max-height: 34vh; }
}

@media (max-width: 600px) {
  .vasco-assistant {
    right: 10px;
    bottom: 10px;
    grid-template-columns: minmax(0, 1fr);
    width: calc(100vw - 20px);
  }
  .vasco-assistant__bubble {
    grid-area: 1 / 1;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border-radius: 14px 14px 4px 14px;
  }
  .vasco-assistant__close {
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    border: 0;
    color: transparent;
    background: transparent;
    font-size: 0;
  }
  .vasco-assistant__close::before {
    content: '×';
    position: absolute;
    inset: 3px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: var(--vasco-text);
    background: rgba(255, 255, 255, .08);
    font: 400 var(--vasc-font-16)/1 Arimo;
  }
  .vasco-assistant__close:hover,
  .vasco-assistant__close:focus-visible { border-color: transparent; background: transparent; }
  .vasco-assistant__close:hover::before,
  .vasco-assistant__close:focus-visible::before {
    border-color: rgba(255, 138, 31, .85);
    background: rgba(255, 138, 31, .18);
  }
  .vasco-assistant__eyebrow { margin-bottom: 3px; font-size: var(--vasc-font-10); letter-spacing: .07em; }
  .vasco-assistant__title { padding-right: 42px; font-size: var(--vasc-font-14); line-height: 1.18; }
  .vasco-assistant__message { margin: 6px 0 9px; font-size: var(--vasc-font-12); line-height: 1.38; }
  .vasco-assistant__actions {
    min-height: clamp(64px, 20vw, 76px);
    align-items: flex-end;
    padding-right: clamp(80px, 25vw, 96px);
  }
  .vasco-assistant__button { min-height: 46px; padding: 8px 11px; font-size: var(--vasc-font-12); }
  .vasco-assistant__portrait {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: end;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 25vw, 86px);
    height: clamp(72px, 25vw, 86px);
    margin: 0 8px 8px 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .vasco-assistant__figure {
    position: static;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: none;
  }
  .vasco-assistant.is-portrait-unavailable { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .vasco-assistant { right: 6px; bottom: 6px; width: calc(100vw - 12px); grid-template-columns: minmax(0, 1fr); }
  .vasco-assistant__bubble { padding: 10px; }
  .vasco-assistant__eyebrow { font-size: var(--vasc-font-10); }
  .vasco-assistant__title { padding-right: 40px; font-size: var(--vasc-font-14); }
  .vasco-assistant__message { font-size: var(--vasc-font-12); }
  .vasco-assistant__actions { min-height: 64px; padding-right: 78px; }
  .vasco-assistant__portrait { width: 72px; height: 72px; margin: 0 6px 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vasco-assistant, .vasco-assistant.is-leaving { animation: none !important; }
}