/* Abacus.ai Chatbot Widget - Mobile Height Optimization v3 */
/* ManSolPro - Vertical space constraints for mobile devices */

@media screen and (max-width: 768px) {

  /* ============================================
     PRIMARY HEIGHT CONSTRAINTS
     ============================================ */

  /* Main widget container - aggressive height limit */
  div[id*="abacus"],
  div[class*="abacus"],
  div[class*="Abacus"],
  div[class*="AbacusWidget"],
  div[class*="chat-widget"],
  div[class*="ChatWidget"],
  div[class*="widget-container"],
  div[class*="WidgetContainer"] {
    max-height: 65vh !important;
    height: auto !important;
    min-height: 300px !important;

    /* Width (preserve existing fix) */
    max-width: 92vw !important;
    width: 92vw !important;
    left: 4vw !important;
    right: 4vw !important;

    /* Layout optimization */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ============================================
     CHAT MESSAGES AREA
     ============================================ */

  /* Messages container - allow scrolling */
  div[class*="messages"],
  div[class*="Messages"],
  div[class*="chat-body"],
  div[class*="ChatBody"],
  div[class*="conversation"],
  div[class*="Conversation"],
  div[class*="chat-content"],
  div[class*="ChatContent"] {
    max-height: 45vh !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    padding: 8px !important;
  }

  /* Individual message bubbles - compact spacing */
  div[class*="message"],
  div[class*="Message"],
  div[class*="chat-message"],
  div[class*="ChatMessage"] {
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* ============================================
     INPUT AREA - CRITICAL HEIGHT REDUCTION
     ============================================ */

  /* Input container */
  div[class*="input-container"],
  div[class*="InputContainer"],
  div[class*="message-input"],
  div[class*="MessageInput"],
  div[class*="chat-input"],
  div[class*="ChatInput"],
  div[class*="composer"],
  div[class*="Composer"],
  div[class*="chat-footer"],
  div[class*="ChatFooter"],
  form[class*="chat"],
  form[class*="Chat"] {
    max-height: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Text input field - height reduction */
  input[type="text"],
  textarea,
  [contenteditable="true"] {
    max-height: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;

    /* Width (preserve) */
    flex: 1 1 auto !important;
    max-width: calc(100% - 90px) !important;

    /* Disable textarea resizing */
    resize: none !important;
    box-sizing: border-box !important;
  }

  /* Button controls */
  button,
  [role="button"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
  }

  /* ============================================
     HEADER/TITLE AREA - COMPACT
     ============================================ */

  div[class*="header"],
  div[class*="Header"],
  div[class*="title-bar"],
  div[class*="TitleBar"],
  div[class*="chat-header"],
  div[class*="ChatHeader"] {
    max-height: 50px !important;
    height: 50px !important;
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  /* ============================================
     KEYBOARD-AWARE ADJUSTMENTS
     ============================================ */

  /* When virtual keyboard is active (viewport-fit=cover) */
  @supports (height: 100dvh) {
    div[id*="abacus"],
    div[class*="AbacusWidget"],
    div[class*="chat-widget"] {
      max-height: 60dvh !important; /* Dynamic viewport height */
    }

    div[class*="messages"],
    div[class*="Messages"],
    div[class*="chat-body"],
    div[class*="ChatBody"] {
      max-height: 40dvh !important;
    }
  }
}

/* ============================================
   EXTRA COMPACT MODE (Small phones <400px)
   ============================================ */

@media screen and (max-width: 400px) {
  div[id*="abacus"],
  div[class*="abacus"],
  div[class*="AbacusWidget"],
  div[class*="chat-widget"] {
    max-height: 55vh !important;
    min-height: 280px !important;
  }

  div[class*="messages"],
  div[class*="Messages"],
  div[class*="chat-body"] {
    max-height: 38vh !important;
  }

  div[class*="input-container"],
  div[class*="InputContainer"],
  div[class*="message-input"],
  div[class*="chat-input"] {
    max-height: 56px !important;
    height: 56px !important;
    padding: 6px !important;
  }

  input[type="text"],
  textarea {
    max-height: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  button,
  [role="button"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  div[class*="header"],
  div[class*="Header"],
  div[class*="chat-header"] {
    max-height: 44px !important;
    height: 44px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================
   FLOATING BUTTON (When widget is closed)
   ============================================ */

@media screen and (max-width: 768px) {
  /* Reduce floating button size on mobile */
  button[class*="chat-toggle"],
  button[class*="ChatToggle"],
  button[class*="widget-toggle"],
  button[class*="WidgetToggle"],
  div[class*="floating-button"],
  div[class*="FloatingButton"],
  div[class*="launcher"],
  div[class*="Launcher"] {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
}