/* ============================================================
   Arna Softech Chatbot — all rules scoped to #arna-chatbot-root
   so nothing leaks into the rest of the WordPress site.
   ============================================================ */

#arna-chatbot-root {
    /* Design tokens scoped to the chatbot only */
    --acb-primary-blue:   #0053A0;
    --acb-secondary-blue: #00AEEF;
    --acb-bot-accent-black: #000000;
    --acb-orange:         #F5A623;
    --acb-red: #f11c3a;
    --acb-black:    #000000;
    --acb-orange-dark:    #D48E20;
    --acb-teal:           #00A5B5;
    --acb-teal-light:     #00C4D4;
    --acb-gray:           #F5F6F5;
    --acb-dark-gray:      #333333;
    --acb-white:          #FFFFFF;
    --acb-user-msg-bg:    #E6F0FF;
    --acb-bot-msg-bg:     #FFFFFF;
  
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

#arna-chatbot-root .font-heading {
    font-family: 'Source Sans Pro', sans-serif;
}

#arna-chatbot-root .font-body {
    font-family: 'Roboto', sans-serif;
}

#arna-chatbot-root *,
#arna-chatbot-root *::before,
#arna-chatbot-root *::after {
    box-sizing: inherit;
}

/* Bubble */
#arna-chatbot-root #chatbot-bubble img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    object-fit: contain;
    transition: transform 0.2s;
}

#arna-chatbot-root #chatbot-bubble img:hover {
    transform: scale(1.1);
}

/* Chat window */
#arna-chatbot-root #chatbot-window {
    width: min(32rem, calc(100vw - 2rem));
    max-height: 600px;
    max-width: 32rem;
    overflow-y: auto;
    background: var(--acb-gray);
}

#arna-chatbot-root #chatbot-window > div:first-child {
    background: var(--acb-primary-blue);
    color: var(--acb-white);
}

#arna-chatbot-root #chatbot-content {
    color: var(--acb-dark-gray);
}

/* Messages */
#arna-chatbot-root #chat-messages div {
    margin-bottom: 0.75rem;
}

#arna-chatbot-root #chat-messages span {
    display: block;
    padding: 10px 14px;
    margin: 6px 0;
    border-radius: 12px;
    word-wrap: break-word;
    white-space: normal;
}

#arna-chatbot-root #chat-messages .text-right span {
    background: var(--acb-user-msg-bg);
    color: var(--acb-dark-gray);
    padding: 0.5rem 1rem;
    border-radius: 1rem 1rem 0 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#arna-chatbot-root #chat-messages .text-left span {
    background: var(--acb-bot-msg-bg);
    color: var(--acb-dark-gray);
    padding: 0.5rem 1rem;
    border-radius: 1rem 1rem 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#arna-chatbot-root #chat-messages .text-red-500 {
    color: #EF4444;
}

/* Suggestions */
#arna-chatbot-root #chat-messages .suggestions {
    margin-top: 1rem;
    padding: 0.5rem;
    background: var(--acb-white);
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#arna-chatbot-root #chat-messages .suggestion-btn {
    flex: 1;
    background: var(--acb-secondary-blue);
    color: var(--acb-white);
    padding: 0.5rem;
    border: 1px solid var(--acb-primary-blue);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    text-align: center;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
}

#arna-chatbot-root #chat-messages .suggestion-btn:hover {
    background: var(--acb-primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Bot response */
#arna-chatbot-root .bot-response {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

#arna-chatbot-root .bot-response p {
    margin-bottom: 12px;
}

#arna-chatbot-root .bot-response ul {
    margin: 12px 0;
    padding-left: 22px;
    list-style-type: disc;
}

#arna-chatbot-root .bot-response li {
    margin-bottom: 8px;
}

/* Loading dots */
#arna-chatbot-root #loading-indicator {
    padding: 0.5rem;
    margin: 0.5rem 0;
    text-align: center;
}

#arna-chatbot-root #loading-indicator .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    background: var(--acb-primary-blue, #0053A0);
    border-radius: 50%;
    animation: arna-bounce 1.4s infinite ease-in-out;
}

#arna-chatbot-root #loading-indicator .dot:nth-child(2) { animation-delay: -0.32s; }
#arna-chatbot-root #loading-indicator .dot:nth-child(3) { animation-delay: -0.16s; }

@keyframes arna-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40%            { transform: scale(1); }
}

/* Back button */
#arna-chatbot-root #chatbot-back {
    background: none;
    border: none;
    color: var(--acb-white);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

#arna-chatbot-root #chatbot-back:hover {
    color: var(--acb-secondary-blue);
}

/* Action buttons */
#arna-chatbot-root #ask-arna-btn           {
     background: var(--acb-primary-blue, #0053A0); 
       color: #fff;
       border-radius: 0.5rem;
 }
#arna-chatbot-root #ask-arna-btn:hover     {
    background: var(--acb-secondary-blue, #00AEEF);
     }

#arna-chatbot-root #submit-query-btn,
#arna-chatbot-root #query-submit           {
    background: var(--acb-orange, #F5A623);
     color: #333;
     border-radius: 4px;
     }
#arna-chatbot-root #submit-query-btn:hover,
#arna-chatbot-root #query-submit:hover     {
    background: var(--acb-orange-dark, #D48E20);
    }

#arna-chatbot-root #chat-submit            { 
    background: var(--acb-teal, #00A5B5);     
       color: #fff;
       border-radius: 4px;
 }
#arna-chatbot-root #chat-submit:hover      { background: var(--acb-teal-light, #00C4D4); }

/* Inputs — scoped so they don't touch theme inputs */
#arna-chatbot-root input,
#arna-chatbot-root textarea {
    border: 1px solid #D1D5DB;
    transition: border-color 0.2s;
    font-family: 'Roboto', sans-serif;
    color: var(--acb-dark-gray);
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background: #fff;
}

#arna-chatbot-root input:focus,
#arna-chatbot-root textarea:focus {
    outline: none;
    border-color: var(--acb-secondary-blue);
    box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

#arna-chatbot-root input::placeholder,
#arna-chatbot-root textarea::placeholder {
    color: var(--acb-dark-gray);
    opacity: 1;
}

/* Buttons — scoped hover lift */
#arna-chatbot-root button {
    transition: background-color 0.2s, transform 0.1s;
    cursor: pointer;
}

#arna-chatbot-root button:hover  { transform: translateY(-1px); }
#arna-chatbot-root button:active { transform: translateY(0); }

/* Validation states */
#arna-chatbot-root .field-error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 10px;
}

#arna-chatbot-root .form-error {
    color: #dc2626;
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}

#arna-chatbot-root .input-error {
    border-color: #dc2626 !important;
}

/* Registration CTA */
#arna-chatbot-root #start-chat-btn {
    background: var(--acb-primary-blue);
    color: var(--acb-white);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 83, 160, 0.25);
    border-radius: 4px;
}

#arna-chatbot-root #start-chat-btn:hover {
    background: var(--acb-secondary-blue);
    transform: translateY(-1px);
}

#arna-chatbot-root #start-chat-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}