/* AI Assistant floating widget — host-page chrome only.
   The chat itself is styled by ask.css inside the iframe. */

.ai-help-fab {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;

  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  overflow: hidden;

  color: #fff;
  cursor: pointer;

  box-shadow: var(--box-shadow-larger, 0 4px 12px rgba(0, 0, 0, .15));
  transition: transform .2s ease, filter .2s ease;
}

.ai-help-fab:hover {
  filter: brightness(110%);
  transform: translateY(-.125rem);
}

.ai-help-fab:active {
  transform: translateY(0);
}

.ai-help-fab:focus-visible {
  outline: .1875rem solid var(--color-warning, #ffd900);
  outline-offset: .125rem;
}

.ai-help-fab-icon {
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thin support-chat-sized dialog: narrow column, comfortable height. */
.ai-help-dialog {
  position: relative;
  margin: auto;
  width: min(100%, 28rem);
  height: min(92dvh, 42rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  border-radius: 1rem;
  background: var(--body-bg, #fff);
  box-shadow: var(--box-shadow-larger, 0 4px 12px rgba(0, 0, 0, .15));
  overflow: hidden;
}

.ai-help-dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}

.ai-help-dialog iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--body-bg, #fff);
}

.ai-help-close {
  position: absolute;
  inset-inline-end: .75rem;
  top: .75rem;
  z-index: 3;

  width: 2.25rem;
  height: 2.25rem;

  background: rgba(0, 0, 0, .55);
  color: #fff;
}

.ai-help-close:hover {
  background: rgba(0, 0, 0, .75);
  color: #fff;
}

.ai-help-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;

  border: .25rem solid var(--color-light, #f5f5f5);
  border-top-color: var(--color-ai, #6f42c1);
  border-radius: 50%;

  animation: ai-help-spin .8s linear infinite;
}

.ai-help-spinner[hidden] { display: none; }

@keyframes ai-help-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .ai-help-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .ai-help-close {
    inset-inline-end: .5rem;
    top: .5rem;
  }
}