/* Abacus.ai Chatbot Widget - Mobile Responsiveness Fix v2 */
/* ManSolPro - Aggressive Override for Mobile Viewport */

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

  /* Main widget container - multiple selector strategies */
  div[id*="abacus"],
  div[class*="abacus"],
  div[class*="Abacus"],
  div[class*="AbacusWidget"],
  div[class*="chat-widget"],
  div[class*="chatbot"],
  div[class*="ChatWidget"],
  div[class*="messenger"],
  [data-widget="abacus"],
  [data-chatbot] {
    max-width: 92vw !important;
    width: 92vw !important;
    left: 4vw !important;
    right: 4vw !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* If widget uses iframe */
  iframe[src*="abacus"],
  iframe[src*="abacus.ai"],
  iframe[id*="abacus"],
  iframe[class*="chat"] {
    max-width: 92vw !important;
    width: 92vw !important;
    left: 4vw !important;
    right: 4vw !important;
    box-sizing: border-box !important;
  }

  /* Chat window/dialog/popup */
  div[class*="dialog"],
  div[class*="Dialog"],
  div[class*="popup"],
  div[class*="Popup"],
  div[class*="window"],
  div[class*="Window"],
  div[class*="panel"],
  div[class*="Panel"],
  div[class*="container"][class*="chat"],
  div[class*="Container"][class*="Chat"] {
    max-width: 92vw !important;
    width: 92vw !important;
    left: 4vw !important;
    right: 4vw !important;
    box-sizing: border-box !important;
  }

  /* Input container */
  div[class*="input"],
  div[class*="Input"],
  div[class*="message-input"],
  div[class*="MessageInput"],
  div[class*="chat-input"],
  div[class*="ChatInput"],
  div[class*="composer"],
  div[class*="Composer"] {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Text input field */
  input[type="text"],
  textarea,
  [contenteditable="true"] {
    max-width: calc(100% - 80px) !important;
    width: calc(100% - 80px) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Button group / action buttons */
  div[class*="button"],
  div[class*="Button"],
  div[class*="action"],
  div[class*="Action"],
  div[class*="controls"],
  div[class*="Controls"] {
    flex-shrink: 0 !important;
    max-width: 80px !important;
  }

  /* Individual buttons */
  button,
  [role="button"] {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 40px !important;
    padding: 6px !important;
  }

  /* Messages area */
  div[class*="message"],
  div[class*="Message"],
  div[class*="content"],
  div[class*="Content"] {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
}

/* Extra small devices - Xiaomi specific (< 400px) */
@media screen and (max-width: 400px) {
  div[id*="abacus"],
  div[class*="abacus"],
  div[class*="Abacus"],
  div[class*="AbacusWidget"],
  div[class*="chat-widget"],
  div[class*="ChatWidget"],
  iframe[src*="abacus"] {
    max-width: 96vw !important;
    width: 96vw !important;
    left: 2vw !important;
    right: 2vw !important;
  }

  input[type="text"],
  textarea {
    max-width: calc(100% - 70px) !important;
    width: calc(100% - 70px) !important;
    font-size: 14px !important;
  }

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

/* Prevent horizontal scroll */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}