/* =========================================
   AmarGame Ultimate Super Bot CSS
   PC: Max 1140px | Mobile: Min 250px
========================================= */

#ag-chat-container {
    width: 100% !important; max-width: 1140px !important; min-width: 250px !important;
    margin: 30px auto !important; border-radius: 16px !important; background: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    border: 1px solid #edf2f7 !important;
}

/* Premium Header */
.ag-chat-header {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important; color: #fff !important;
    padding: 16px 25px !important; display: flex !important; align-items: center !important; gap: 12px !important;
}

.status-dot { width: 12px !important; height: 12px !important; background: #22c55e !important; border-radius: 50% !important; display: block !important; box-shadow: 0 0 10px rgba(34,197,94,0.8) !important; }

.header-text { display: flex !important; flex-direction: column !important; }
.bot-title { font-weight: 700 !important; font-size: 17px !important; line-height: 1.2 !important; }
.bot-subtitle { font-size: 12px !important; opacity: 0.8 !important; }

#ag-chat-box { height: 500px !important; overflow-y: auto !important; padding: 25px !important; background: #f8fafc !important; display: flex !important; flex-direction: column !important; }

/* Overlap Fix */
.ag-msg-wrapper { margin-bottom: 25px !important; display: flex !important; width: 100% !important; align-items: flex-start !important; clear: both !important; position: relative !important; }
.ag-msg-wrapper.user { justify-content: flex-end !important; }
.ag-msg-wrapper.bot { justify-content: flex-start !important; }

/* Anti-Shrink Message Bubbles */
.ag-user-msg, .ag-bot-msg {
    padding: 12px 20px !important; font-size: 15px !important; line-height: 1.5 !important; border-radius: 12px !important;
    width: fit-content !important; max-width: 85% !important; flex-shrink: 1 !important;
    white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: break-word !important;
    display: inline-block !important; text-align: left !important;
}

.ag-user-msg { background: #3b82f6 !important; color: #fff !important; border-bottom-right-radius: 3px !important; box-shadow: 0 4px 10px rgba(59,130,246,0.2) !important; }
.ag-bot-msg { background: #ffffff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; border-bottom-left-radius: 3px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; }

/* WhatsApp & iframe */
.ag-bot-msg iframe { max-width: 100% !important; width: 100% !important; border-radius: 8px !important; margin-top: 10px !important; }
.ag-wa-btn { display: inline-block !important; background: #25D366 !important; color: #fff !important; padding: 10px 20px !important; border-radius: 8px !important; text-decoration: none !important; font-weight: bold !important; font-size: 14px !important; margin-top:10px !important;}
.ag-wa-btn:hover { background: #128C7E !important; color: #fff !important;}

/* Advanced Product Cards (Scroll Removed) */
.ag-variation-box { display: block !important; width: 100% !important; overflow: hidden !important; position: relative !important; margin-bottom: 10px !important; }
.ag-var-grid { display: grid !important; padding-bottom: 5px !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top:10px !important; }

.ag-var-item { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; padding: 10px !important; text-align: center !important; transition: 0.2s !important; }
.ag-var-item:hover { border-color: #3b82f6 !important; box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1) !important; }
.ag-var-name { font-size: 13px !important; font-weight: 700 !important; color: #334155 !important; margin-bottom: 5px !important; }
.ag-var-price { font-size: 14px !important; font-weight: 800 !important; color: #10b981 !important; margin-bottom: 8px !important; }
.ag-var-buy { display: block !important; background: #3b82f6 !important; color: #ffffff !important; padding: 5px !important; border-radius: 4px !important; font-size: 12px !important; text-decoration: none !important; font-weight: bold !important; }
.ag-var-buy:hover { background: #1d4ed8 !important; color: #ffffff !important; }

/* Dynamic Tree Buttons */
.ag-bot-buttons { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 5px !important; margin-bottom: 15px !important; width: 100% !important; }
.ag-btn { background: #eff6ff !important; border: 1.5px solid #bfdbfe !important; color: #2563eb !important; padding: 8px 18px !important; border-radius: 20px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 600 !important; transition: 0.2s !important; width: fit-content !important; max-width: 100% !important; white-space: normal !important; word-break: break-word !important;}
.ag-btn:hover { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important;}

/* Input Area */
.ag-chat-input-area { display: flex !important; background: #fff !important; padding: 15px 20px !important; gap: 12px !important; border-top: 1px solid #f1f5f9 !important; align-items: center !important; }
#ag-chat-input { flex: 1 !important; border: 1px solid #cbd5e1 !important; background: #f8fafc !important; border-radius: 25px !important; padding: 12px 20px !important; outline: none !important; font-size: 15px !important; min-width: 50px !important; transition: 0.3s !important;}
#ag-chat-input:focus { border-color: #3b82f6 !important; background: #fff !important;}
#ag-chat-send { background: #3b82f6 !important; color: #fff !important; border: none !important; border-radius: 50% !important; width: 45px !important; height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: 0.2s !important; flex-shrink: 0 !important; box-shadow: 0 4px 10px rgba(59,130,246,0.3) !important;}
#ag-chat-send:hover { background: #1d4ed8 !important; transform: scale(1.05) !important;}

/* Animation */
.dot { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #94a3b8 !important; margin: 0 2px !important; animation: bounce 1.3s linear infinite !important; }
.dot:nth-child(2) { animation-delay: -1.1s !important; }
.dot:nth-child(3) { animation-delay: -0.9s !important; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* Ultimate Responsive System */
@media screen and (max-width: 768px) {
    #ag-chat-container { margin: 10px auto !important; border-radius: 10px !important; border: none !important;}
    #ag-chat-box { height: calc(100vh - 145px) !important; padding: 15px !important; }
    .ag-user-msg, .ag-bot-msg { font-size: 14px !important; padding: 10px 16px !important; max-width: 90% !important; }
    .ag-chat-input-area { padding: 12px 15px !important; gap: 10px !important; }
    #ag-chat-input { font-size: 14px !important; padding: 10px 15px !important; }
}

@media screen and (max-width: 350px) {
    #ag-chat-container { margin: 0 auto !important; min-width: 250px !important; border-radius: 0 !important;}
    .ag-chat-header { padding: 12px 15px !important; }
    .bot-title { font-size: 15px !important; }
    #ag-chat-box { padding: 10px !important; }
    .ag-user-msg, .ag-bot-msg { font-size: 13px !important; padding: 8px 12px !important; max-width: 95% !important; }
    .ag-btn { font-size: 12px !important; padding: 6px 14px !important; }
    .ag-chat-input-area { padding: 8px 10px !important; gap: 8px !important; }
    #ag-chat-input { font-size: 13px !important; padding: 8px 12px !important; }
    #ag-chat-send { width: 38px !important; height: 38px !important; }
    .ag-var-grid { grid-template-columns: 1fr !important; }
}