/**
 * JimAI overlay layout (v2) — scoped to [data-jimai-layout="overlay"].
 * Motion rhythm aligned with Sonner: 400ms ease primary, 200ms micro.
 */

[data-jimai-layout="overlay"] body.jimai-overlay-open {
  overflow: hidden;
}

[data-jimai-layout="overlay"] body.jimai-overlay-open .page-layout {
  margin-right: 0;
}

[data-jimai-layout="overlay"] body.jimai-overlay-open #chat-open-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(var(--space-2));
}

/* ----- Overlay root ----- */
[data-jimai-layout="overlay"] .jimai-overlay {
  --jimai-motion-duration: var(--duration-surface, 400ms);
  --jimai-motion-ease: var(--ease-surface, ease);
  --jimai-micro-duration: 200ms;
  --jimai-composer-max-width: min(560px, calc(100vw - var(--space-4) * 2));
  --jimai-submit-size: 40px;
  --jimai-input-height: var(--chat-form-control-height, 52px);
  --jimai-dock-bottom: max(var(--chat-fab-inset-bottom), env(safe-area-inset-bottom));
  --jimai-thread-width: var(--jimai-composer-max-width);
  --jimai-thread-offset: calc(var(--chat-fab-center-x, 50vw) - var(--jimai-composer-max-width) / 2);

  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active {
  pointer-events: auto;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing {
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__composer {
  pointer-events: none;
}

/* ----- Backdrop (two layers: fixed blur + fading wash — never animate blur radius) ----- */
[data-jimai-layout="overlay"] .jimai-overlay__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0);
  transition: background var(--jimai-motion-duration) var(--jimai-motion-ease);
  transition-delay: 80ms;
}

[data-jimai-layout="overlay"] .jimai-overlay__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jimai-motion-duration) var(--jimai-motion-ease);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__backdrop::before {
  opacity: 1;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__backdrop {
  background: rgba(255, 255, 255, 0.72);
}

/* Close: wash out first, blur follows (reverse of open stagger) */
[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__backdrop {
  background: rgba(255, 255, 255, 0);
  transition-delay: 0ms;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__backdrop::before {
  opacity: 0;
  transition-delay: 100ms;
}

/* No backdrop-filter support: stronger wash only */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-jimai-layout="overlay"] .jimai-overlay__backdrop::before {
    display: none;
  }

  [data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__backdrop {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ----- Chrome layout ----- */
[data-jimai-layout="overlay"] .jimai-overlay__chrome {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay__close {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top));
  right: max(var(--space-3), env(safe-area-inset-right));
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--jimai-motion-duration) var(--jimai-motion-ease),
    transform var(--jimai-motion-duration) var(--jimai-motion-ease),
    color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__close {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__close {
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: var(--jimai-micro-duration);
  transition-delay: 0ms;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay__close:hover {
  color: var(--color-accent);
  background: #fff;
}

[data-jimai-layout="overlay"] .jimai-overlay__close svg {
  width: 16px;
  height: 16px;
}

/* ----- Messages (thread: intro + conversation) ----- */
[data-jimai-layout="overlay"] .jimai-overlay__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--header-height) + var(--space-4)) 0
    calc(var(--jimai-dock-bottom) + var(--jimai-input-height) + var(--space-2) + 11rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: var(--jimai-thread-width);
  max-width: calc(100vw - var(--space-4) * 2);
  margin-left: var(--jimai-thread-offset);
  margin-right: auto;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--jimai-motion-duration) var(--jimai-motion-ease),
    transform var(--jimai-motion-duration) var(--jimai-motion-ease),
    visibility var(--jimai-motion-duration);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-intro-active .jimai-overlay__messages,
[data-jimai-layout="overlay"] .jimai-overlay.is-conversation .jimai-overlay__messages {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0ms;
}

[data-jimai-layout="overlay"] .jimai-overlay__intro-message {
  align-self: flex-start;
  max-width: 100%;
  margin-right: auto;
}

[data-jimai-layout="overlay"] .jimai-overlay__intro-message p {
  margin: 0;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__messages {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: var(--jimai-micro-duration);
  transition-delay: 0ms;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay__messages .chat-message {
  max-width: 85%;
}

[data-jimai-layout="overlay"] .jimai-overlay__messages .chat-message--user {
  align-self: flex-end;
  margin-left: auto;
}

[data-jimai-layout="overlay"] .jimai-overlay__messages .chat-message--bot {
  align-self: flex-start;
  margin-right: auto;
}

/* ----- Dock ----- */
[data-jimai-layout="overlay"] .jimai-overlay__dock {
  flex-shrink: 0;
  position: relative;
  height: 0;
  pointer-events: none;
}

/* ----- Suggestions (fixed above composer) ----- */
@keyframes jimai-suggestion-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-jimai-layout="overlay"] .jimai-overlay__suggestions {
  position: fixed;
  left: var(--jimai-thread-offset);
  bottom: calc(var(--jimai-dock-bottom) + var(--jimai-input-height) + var(--space-2));
  transform: none;
  z-index: 3;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-1);
  width: var(--jimai-thread-width);
  max-width: calc(100vw - var(--space-4) * 2);
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--jimai-motion-duration) var(--jimai-motion-ease),
    visibility var(--jimai-motion-duration);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-intro-ready .jimai-overlay__suggestions:not(.jimai-overlay__suggestions--hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-jimai-layout="overlay"] .jimai-overlay__suggestions--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-active.is-closing .jimai-overlay__suggestions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-duration: var(--jimai-micro-duration);
  transition-delay: 0ms;
}

[data-jimai-layout="overlay"] .jimai-overlay__suggestion {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  text-align: right;
  white-space: normal;
  max-width: 100%;
  opacity: 0;
  transform: translateX(10px);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-intro-ready .jimai-overlay__suggestion:not(.is-used) {
  animation: jimai-suggestion-in var(--jimai-motion-duration) var(--jimai-motion-ease) forwards;
  animation-delay: calc(var(--jimai-suggestion-index, 0) * 80ms);
}

[data-jimai-layout="overlay"] .jimai-overlay__suggestion:hover {
  background: rgba(230, 95, 46, 0.12);
  color: var(--color-accent);
  border-color: rgba(230, 95, 46, 0.24);
}

[data-jimai-layout="overlay"] .jimai-overlay__suggestion:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ----- Composer morph ----- */
[data-jimai-layout="overlay"] .jimai-overlay__composer {
  position: fixed;
  left: var(--jimai-morph-x, var(--chat-fab-center-x, 50%));
  top: var(--jimai-morph-y, auto);
  bottom: auto;
  width: var(--jimai-morph-w, var(--jimai-composer-max-width));
  height: var(--jimai-morph-h, var(--jimai-input-height));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: auto;
  z-index: 2;
  isolation: isolate;
  transition:
    top var(--jimai-motion-duration) var(--jimai-motion-ease),
    bottom var(--jimai-motion-duration) var(--jimai-motion-ease),
    width var(--jimai-motion-duration) var(--jimai-motion-ease),
    height var(--jimai-motion-duration) var(--jimai-motion-ease),
    gap var(--jimai-motion-duration) var(--jimai-motion-ease);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__composer {
  top: auto;
  bottom: var(--jimai-dock-bottom);
  width: var(--jimai-composer-max-width);
  max-width: calc(100vw - var(--space-4) * 2);
  height: auto;
  gap: 0;
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed.is-submit-visible .jimai-overlay__composer {
  width: min(
    calc(var(--jimai-composer-max-width) + var(--jimai-submit-size) + var(--space-2)),
    calc(100vw - var(--space-4) * 2)
  );
  gap: var(--space-2);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed.is-submit-visible .jimai-overlay__input-wrap {
  flex: 0 0 auto;
  width: var(--jimai-composer-max-width);
  max-width: var(--jimai-composer-max-width);
}

[data-jimai-layout="overlay"] .jimai-overlay__input-wrap {
  flex: 1;
  min-width: 0;
  height: var(--jimai-input-height);
  display: flex;
  align-items: center;
  background: var(--color-text);
  color: var(--color-bg);
  border: var(--chat-fab-border);
  border-radius: var(--chat-fab-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    background var(--jimai-motion-duration) var(--jimai-motion-ease),
    color var(--jimai-motion-duration) var(--jimai-motion-ease),
    border-color var(--jimai-motion-duration) var(--jimai-motion-ease);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__input-wrap {
  border-radius: var(--chat-fab-radius);
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-jimai-layout="overlay"] .jimai-overlay__fab-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--chat-fab-gap);
  padding: 0 var(--chat-fab-padding-x);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 1;
  max-width: 100%;
  transition:
    opacity var(--jimai-micro-duration) var(--jimai-motion-ease),
    max-width var(--jimai-motion-duration) var(--jimai-motion-ease),
    padding var(--jimai-motion-duration) var(--jimai-motion-ease);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__fab-ghost {
  opacity: 0;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

[data-jimai-layout="overlay"] .jimai-overlay__fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chat-fab-icon-wrap-size);
  height: var(--chat-fab-icon-wrap-size);
  border-radius: 50%;
  background: var(--chat-fab-icon-wrap-bg);
  flex-shrink: 0;
}

[data-jimai-layout="overlay"] .jimai-overlay__fab-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-mono);
  line-height: var(--line-height-normal);
}

[data-jimai-layout="overlay"] .jimai-overlay__form {
  flex: 1;
  min-width: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jimai-micro-duration) var(--jimai-motion-ease);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__form {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 120ms;
}

[data-jimai-layout="overlay"] .jimai-overlay__input {
  width: 100%;
  height: var(--jimai-input-height);
  border: 0;
  background: transparent;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  padding: 0 var(--space-3);
}

[data-jimai-layout="overlay"] .jimai-overlay__input::placeholder {
  color: var(--color-text-muted);
}

[data-jimai-layout="overlay"] .jimai-overlay__input:focus {
  outline: none;
}

/* ----- Submit (separate reveal after input expands) ----- */
[data-jimai-layout="overlay"] .jimai-overlay__submit {
  width: 0;
  min-width: 0;
  height: var(--jimai-submit-size);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.5);
  pointer-events: none;
  transition:
    width var(--jimai-motion-duration) var(--jimai-motion-ease),
    opacity var(--jimai-motion-duration) var(--jimai-motion-ease),
    transform var(--jimai-motion-duration) cubic-bezier(0.34, 1.2, 0.64, 1),
    background var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

[data-jimai-layout="overlay"] .jimai-overlay.is-submit-visible .jimai-overlay__submit {
  width: var(--jimai-submit-size);
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

[data-jimai-layout="overlay"] .jimai-overlay__form--has-text .jimai-overlay__submit {
  background: var(--color-accent);
  color: #fff;
}

[data-jimai-layout="overlay"] .jimai-overlay__form--has-text .jimai-overlay__submit:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

[data-jimai-layout="overlay"] .jimai-overlay__submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

[data-jimai-layout="overlay"] .jimai-overlay__form--has-text .jimai-overlay__submit:disabled {
  opacity: 1;
}

[data-jimai-layout="overlay"] .jimai-overlay__submit svg {
  width: 18px;
  height: 18px;
}

[data-jimai-layout="overlay"] .jimai-overlay__submit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  [data-jimai-layout="overlay"] .jimai-overlay__backdrop,
  [data-jimai-layout="overlay"] .jimai-overlay__backdrop::before,
  [data-jimai-layout="overlay"] .jimai-overlay__close,
  [data-jimai-layout="overlay"] .jimai-overlay__messages,
  [data-jimai-layout="overlay"] .jimai-overlay__composer,
  [data-jimai-layout="overlay"] .jimai-overlay__input-wrap,
  [data-jimai-layout="overlay"] .jimai-overlay__fab-ghost,
  [data-jimai-layout="overlay"] .jimai-overlay__form,
  [data-jimai-layout="overlay"] .jimai-overlay__submit,
  [data-jimai-layout="overlay"] .jimai-overlay__suggestions {
    transition: none !important;
    animation: none !important;
  }

  [data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__backdrop {
    background: rgba(255, 255, 255, 0.72);
  }

  [data-jimai-layout="overlay"] .jimai-overlay.is-active .jimai-overlay__backdrop::before {
    opacity: 1;
  }

  [data-jimai-layout="overlay"] .jimai-overlay.is-intro-ready .jimai-overlay__suggestions:not(.jimai-overlay__suggestions--hidden) {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  [data-jimai-layout="overlay"] .jimai-overlay.is-intro-active .jimai-overlay__messages,
  [data-jimai-layout="overlay"] .jimai-overlay.is-conversation .jimai-overlay__messages,
  [data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__close,
  [data-jimai-layout="overlay"] .jimai-overlay.is-intro-ready .jimai-overlay__suggestion,
  [data-jimai-layout="overlay"] .jimai-overlay.is-submit-visible .jimai-overlay__submit,
  [data-jimai-layout="overlay"] .jimai-overlay.is-morphed .jimai-overlay__form {
    opacity: 1;
    transform: none;
  }
}