@charset "UTF-8";
/*
 *  Copyright IBM Corp. 2026
 *
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/**
 * Float positioning styles for Carbon AI Chat floating widget mode.
 * Following @carbon/styles component patterns where styles are wrapped in mixins.
 *
 * These styles can be applied to both cds-aichat-shell (for lazy loading placeholders)
 * and the full ChatContainer to ensure consistent positioning and animations.
 *
 * Usage (Sass — mixin, for composing into your own stylesheet):
 * @use "@carbon/ai-chat/scss/chat-float-layout";
 * @include chat-float-layout.float-positioning;
 *
 * Usage (CSS — pre-compiled, no Sass pipeline needed):
 * @import "@carbon/ai-chat/css/chat-float-layout.css";
 *
 * Classes generated:
 * - .cds-aichat-float--open    — base fixed positioning
 * - .cds-aichat-float--opening — entrance animation
 * - .cds-aichat-float--closing — exit animation
 * - .cds-aichat-float--close   — fully hidden state
 * - .cds-aichat-float--mobile  — mobile overrides
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/*
 *  Copyright IBM Corp. 2025
 *
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/*
 *  Copyright IBM Corp. 2025
 *
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/*
 *  Copyright IBM Corp. 2026
 *
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/**
 * Float positioning styles for Carbon AI Chat floating widget mode.
 * Following @carbon/styles component patterns where styles are wrapped in mixins.
 *
 * These styles can be applied to both cds-aichat-shell (for lazy loading placeholders)
 * and the full ChatContainer to ensure consistent positioning and animations.
 *
 * Usage (Sass — mixin, for composing into your own stylesheet):
 * @use "@carbon/ai-chat/scss/chat-float-layout";
 * @include chat-float-layout.float-positioning;
 *
 * Usage (CSS — pre-compiled, no Sass pipeline needed):
 * @import "@carbon/ai-chat/css/chat-float-layout.css";
 *
 * Classes generated:
 * - .cds-aichat-float--open    — base fixed positioning
 * - .cds-aichat-float--opening — entrance animation
 * - .cds-aichat-float--closing — exit animation
 * - .cds-aichat-float--close   — fully hidden state
 * - .cds-aichat-float--mobile  — mobile overrides
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* ============================================================================
   FLOAT - BASE POSITIONING
   Fixed positioning for floating widget mode
   Uses logical properties for automatic RTL support
   ============================================================================ */
.cds-aichat-float--open {
  position: fixed;
  z-index: var(--cds-aichat-z-index, 99999);
  block-size: var(--cds-aichat-height, calc(100vh - 2 * 2rem));
  inline-size: var(--cds-aichat-width, 380px);
  inset-block-end: var(--cds-aichat-bottom-position, 3rem);
  inset-block-start: var(--cds-aichat-top-position, auto);
  inset-inline-end: var(--cds-aichat-right-position, 2rem);
  inset-inline-start: var(--cds-aichat-left-position, auto);
  max-block-size: var(--cds-aichat-max-height, 640px);
  max-inline-size: var(--cds-aichat-messages-max-width, 672px);
  min-block-size: var(--cds-aichat-min-height, 150px);
}

/* ============================================================================
   FLOAT - OPENING ANIMATION
   Animation when chat is opening
   ============================================================================ */
.cds-aichat-float--opening {
  animation: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .cds-aichat-float--opening:not(.cds-aichat-float--mobile) {
    animation: cds-aichat-float-in 240ms cubic-bezier(0, 0, 0.3, 1) both;
  }
}
/* ============================================================================
   FLOAT - CLOSING ANIMATION
   Animation when chat is closing
   ============================================================================ */
.cds-aichat-float--closing {
  animation: cds-aichat-float-out 110ms cubic-bezier(0.4, 0.14, 1, 1) both;
}

@media screen and (prefers-reduced-motion: reduce) {
  .cds-aichat-float--closing {
    animation: none;
  }
}
/* ============================================================================
   FLOAT - CLOSED STATE
   Styles when chat is fully closed
   ============================================================================ */
.cds-aichat-float--close {
  display: none;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* ============================================================================
   FLOAT - MOBILE RESPONSIVE
   Mobile-specific positioning and animations
   ============================================================================ */
.cds-aichat-float--mobile {
  position: fixed;
  z-index: var(--cds-aichat-z-index, 99999);
  block-size: var(--cds-aichat-height, calc(100vh - 2 * 2rem));
  inline-size: var(--cds-aichat-width, 380px);
  inset-block-end: var(--cds-aichat-bottom-position, 3rem);
  inset-block-start: var(--cds-aichat-top-position, auto);
  inset-inline-end: var(--cds-aichat-right-position, 2rem);
  inset-inline-start: var(--cds-aichat-left-position, auto);
  max-block-size: var(--cds-aichat-max-height, 640px);
  max-inline-size: 100%;
  min-block-size: var(--cds-aichat-min-height, 150px);
}

.cds-aichat-float--mobile.cds-aichat-float--opening {
  inset-block-end: 1px;
  inset-inline-start: 1px;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .cds-aichat-float--mobile.cds-aichat-float--opening {
    animation: cds-aichat-float-in 240ms cubic-bezier(0, 0, 0.3, 1) both;
  }
}
/* ============================================================================
   FLOAT - KEYFRAME ANIMATIONS
   Animation definitions for opening and closing
   ============================================================================ */
@keyframes cds-aichat-float-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cds-aichat-float-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}