/* --- 1. DIALOG CONTAINER --- */
dialog#copilotChatModal {
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: fixed;
    top: 50px;
    left: 15px;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    padding: 20px 30px;
    margin: 0;
    border: none;
    background: transparent;
}

/* ONLY display as flex when the dialog is actually open */
dialog#copilotChatModal[open] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* Add support for the native backdrop overlay */
dialog#copilotChatModal::backdrop {
    background: rgba(0, 0, 0, 0.2);
}

/* Reset for dialog contents */
dialog#copilotChatModal *, 
dialog#copilotChatModal *::before, 
dialog#copilotChatModal *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

/* Prevent background scrolling when modal is open */
body:has(dialog#copilotChatModal[open]) {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: none;
}

html.wt-chat-open,
body.wt-chat-open {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: none;
}

/* --- MAIN CHAT WINDOW --- */
dialog#copilotChatModal .chat {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    height: 600px;
    max-height: 85vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    min-height: 0;
    animation: chatFadeIn 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

dialog#copilotChatModal .chat-header {
    padding: 16px 20px;
    background: #0f6cbd;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-header-right {
    display: flex;
    gap: 10px;
}

dialog#copilotChatModal .chat-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

dialog#copilotChatModal .chat-header .status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ffd000;
}
dialog#copilotChatModal .chat-header .status-dot.online { background: #5ec75a; }

/* Status Dot states */
#statusDot.success, .status-dot.success {
    background-color: #2ecc71 !important;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6) !important;
}
#statusDot.typing, .status-dot.typing {
    background-color: #2ecc71 !important;
    animation: status-pulse 1.6s infinite ease-in-out;
}
#statusDot.loading, .status-dot.loading {
    background-color: #f1c40f !important;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.6) !important;
}

dialog#copilotChatModal .messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Add this to prevent iOS rubber-banding from pulling the page */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

dialog#copilotChatModal .message.bot ol {
    padding-left: 20px;
}

dialog#copilotChatModal .message.bot ol li ol li {
    display: list-item;
    margin-bottom: 10px;
}

.message.bot h3 {
    margin: 15px 0 !important;
}

dialog#copilotChatModal .message.bot ol li > p {
    display: inline !important;
    margin: 0 !important;
}

.message hr {
    margin: 15px 0 !important;
}

dialog#copilotChatModal .message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

dialog#copilotChatModal .message.agent {
    align-self: flex-start;
    background: #f0f0f0;
    color: #1a1a1a;
    border-bottom-left-radius: 4px;
}

dialog#copilotChatModal .message.user {
    align-self: flex-end;
    background: #0f6cbd;
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing Indicator */
dialog#copilotChatModal .typing-indicator {
    display: none; align-self: flex-start;
    padding: 10px 14px; background: #f0f0f0;
    border-radius: 12px; border-bottom-left-radius: 4px; gap: 4px;
}
dialog#copilotChatModal .typing-indicator.visible { display: flex; }

.typing-indicator-container {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: none !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    margin-top: -4px;
}

.typing-text { color: #7f8c8d; font-size: 12.5px; font-style: italic; }

.typing-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.typing-dots .dot {
    width: 6px; height: 6px; background-color: #7f8c8d;
    border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both;
}
.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }

/* Input Footer */
dialog#copilotChatModal .chat-input {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e0e0e0;
    gap: 8px;
    background: #fff;
}
dialog#copilotChatModal .chat-input input {
    flex: 1; padding: 10px 14px;
    border: 1px solid #d0d0d0; border-radius: 8px; font-size: 16px; outline: none;
}
dialog#copilotChatModal .chat-input button {
    padding: 10px 20px; background: #0f6cbd; color: #fff;
    border: none; border-radius: 8px; font-size: 14px; cursor: pointer;
}

/* --- STATUS BANNER --- */
dialog#copilotChatModal .status-banner {
    padding: 8px 12px; font-size: 13px; text-align: center;
    font-weight: 500; transition: all 0.3s ease; display: none;
}
dialog#copilotChatModal .status-banner.visible { display: block; }
dialog#copilotChatModal .status-banner.loading { background-color: #fff3cd; color: #856404; border-bottom: 1px solid #ffeeba; }
dialog#copilotChatModal .status-banner.error { background-color: #f8d7da; color: #721c24; border-bottom: 1px solid #f5c6cb; }
dialog#copilotChatModal .status-banner.success { background-color: #d4edda; color: #155724; border-bottom: 1px solid #c3e6cb; }

/* --- BOT MARKDOWN STYLES --- */
dialog#copilotChatModal .message.bot {
    align-self: flex-start;
    background: #f0f0f0;
    color: #1a1a1a;
    border-bottom-left-radius: 4px;
    font-size: 13.5px;
    line-height: 1.35;
    word-wrap: break-word;
    padding-left: 20px;
}
dialog#copilotChatModal .message.bot h1,
dialog#copilotChatModal .message.bot h2,
dialog#copilotChatModal .message.bot h3,
dialog#copilotChatModal .message.bot h4,
dialog#copilotChatModal .message.bot h5,
dialog#copilotChatModal .message.bot h6 {
    font-size: 14.5px; font-weight: 700; margin: 8px 0 4px 0; line-height: 1.25;
}
dialog#copilotChatModal .message.bot ul, 
dialog#copilotChatModal .message.bot ol { margin: 4px 0; padding-left: 18px; }
dialog#copilotChatModal .message.bot li { margin-bottom: 3px; line-height: 1.3; }
dialog#copilotChatModal .message.bot p { margin: 0 0 6px 0; }

/* --- MINIMIZED BUBBLE --- */
.chat-min-bubble {
    display: none;
    position: fixed;
    bottom: -24px;
    right: -4px;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0f6cbd;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    width: 479px;
    height: 79px;
    aspect-ratio: 479/79;
    border-radius: 17px 17px 1px 1px;
    min-width: 300px;
    cursor: auto;
    transition: transform 0.2s, box-shadow 0.2s;
    scale: 0.8;
}
.chat-min-bubble.active { display: flex; flex-direction: row; }

/* Minimized styles */
.min-header-title { color: #FFF; font-family: Roboto; font-size: 18px; font-weight: 500; line-height: 26px; margin-left: 15px; }
button#expandChatBtn { margin-top: 4px; margin-right: 10px; }
button#minCloseChatBtn { font-size: 25px; }
.chat-min-bubble .header-left, .chat-min-bubble .header-right { display: flex; align-items: center; gap: 10px; }
.chat-min-bubble .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd000; }
.chat-min-bubble .status-dot.online { background: #5ec75a; }

/* --- SHARED BUTTONS --- */
.chat-header-btn {
    background: none; border: none; color: #fff;
    font-size: 20px; cursor: pointer; padding: 0; opacity: 0.8;
}
.chat-header-btn:hover { opacity: 1; }
.chat-close-btn {
    background: none; border: none; color: #fff; font-size: 24px;
    cursor: pointer; line-height: 1; opacity: 0.8; transition: opacity 0.2s;
}
.chat-close-btn:hover { opacity: 1; }
.open-wt-chatbot.disabled,
.open-wt-chatbot[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

/* Loading Dots */
.btn-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-loading-dots .dot {
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
  animation: dotPulse 1.2s infinite ease-in-out;
}

.btn-loading-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.btn-loading-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* --- ANIMATIONS --- */
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 
    40% { transform: scale(1); opacity: 1; }
}
@keyframes chatBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* --- MEDIA QUERIES --- */
@media (max-width: 500px) {
    dialog#copilotChatModal .messages {
        padding: 0;
    }

    dialog#copilotChatModal {
        padding: 0;
        margin: 0;
        width: 100vw;
        height: var(--wt-vh, 100dvh);
        max-width: none;
        max-height: none;
        border: none;
        top: var(--wt-vv-top, 0px);
        left: 0;
        border-radius: 0;
    }
    
    dialog#copilotChatModal .chat {
        width: 100%; 
        height: 100%; 
        margin: 0; 
        max-width: none;
        max-height: none;
        border-radius: 10px;
        box-shadow: none;
    }
    
    .chat-min-bubble.active {
        display: flex; 
        flex-direction: row; 
        width: 100%;
        scale: 1;
        right: 0;
        font-size: 20px;
    }
}