/* -------------------------------------------------------------------
   i3ai APEX Chatbot - Floating Display Mode
   Loaded alongside i3ai_chat_styles.css only when the region's
   "Display Mode" attribute is set to Floating. Embedded mode (the
   default) is entirely unaffected - every rule here is scoped under
   .i3ai-mode-floating / .i3ai-chat-fab.
   ------------------------------------------------------------------- */

.i3ai-chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.i3ai-chat-fab:hover {
  transform: scale(1.06);
}

.i3ai-chat-container.i3ai-mode-floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 360px;
  height: 480px;
  min-width: 280px;
  min-height: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  z-index: 2147483000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* -------------------------------------------------------------------
   Header (drag handle + close button) - only present in Floating mode
   ------------------------------------------------------------------- */
.i3ai-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #2563eb;
  color: #ffffff;
  cursor: move;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}
.i3ai-chat-panel-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i3ai-chat-panel-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.i3ai-chat-panel-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* "New conversation", injected into the header by i3ai_chat_script.js just
   before the close button. Deliberately quieter than the close button: the
   action is destructive, so it should be reachable, not inviting. It only
   reaches full opacity on hover or keyboard focus. */
.i3ai-chat-container.i3ai-mode-floating .i3ai-chat-panel-header .i3ai-chat-new-conv {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.i3ai-chat-container.i3ai-mode-floating .i3ai-chat-panel-header .i3ai-chat-new-conv:hover,
.i3ai-chat-container.i3ai-mode-floating .i3ai-chat-panel-header .i3ai-chat-new-conv:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

/* jQuery UI resizable's default handle is nearly invisible on a plain
   background - make the bottom-right one easier to grab. */
.i3ai-chat-container.i3ai-mode-floating .ui-resizable-se {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------------
   Mobile: full-screen instead of a small floating box. Dragging is
   disabled at this breakpoint (see i3ai_chat_script.js), so the
   !important pair below is defensive, not routinely needed.

   Height, on a phone, is the whole difficulty. `100vh` on Chrome for
   Android is the viewport WITHOUT the address bar - so a container sized
   that way hangs ~56px below the visible area, and the footer (the input)
   is the part that falls off, being last in the flex column. `100dvh`
   measures what is actually on screen and follows the address bar.
   The virtual keyboard is a separate problem `dvh` does NOT solve: it
   shrinks the visual viewport only, leaving the layout viewport - hence
   fitToVisualViewport() in i3ai_chat_script.js, which sets an inline
   height WITH `important` (a plain inline style would lose to the
   `!important` below).
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
  .i3ai-chat-container.i3ai-mode-floating {
    top: 0 !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;   /* fallback: browsers without dvh */
    height: 100dvh !important;  /* what is really visible */
    max-width: 100vw;
    max-height: 100dvh;
    min-height: 0;              /* beats the 300px floor in i3ai_chat_styles.css */
    border-radius: 0;
  }
  /* Three-class selector so it outranks `.i3ai-chat-output { min-height: 200px }`.
     Without this the column cannot compress and the footer is pushed out of
     view again as soon as the keyboard opens. */
  .i3ai-chat-container.i3ai-mode-floating .i3ai-chat-output {
    min-height: 0;
    padding: 14px;
  }
  /* On a ~412px-wide screen the send button's 32px side padding plus the
     "new conversation" button leave the input about 200px. Trim both. */
  .i3ai-chat-container.i3ai-mode-floating .i3ai-chat-footer {
    padding: 10px 12px;
    gap: 8px;
  }
  .i3ai-chat-container.i3ai-mode-floating .i3ai-chat-btn {
    padding: 12px 18px;
  }
  /* 16px is the threshold below which iOS Safari zooms the page on focus.
     Harmless on Android, so it is set unconditionally rather than guessed. */
  .i3ai-chat-container.i3ai-mode-floating .i3ai-chat-input {
    font-size: 16px;
  }
  .i3ai-chat-panel-header {
    border-radius: 0;
  }
  .i3ai-chat-fab {
    right: 16px;
    bottom: 16px;
  }
}