/**
 * Enhanced chat interface styling
 * Improves the original chat with better animations and responsiveness
 */

/* Enhanced chat container - NOT fullscreen, just improved */
.chat-container {
    max-width: 768px;
    margin: 0 auto;
    background: var(--bs-body-bg);
    border: none !important; /* Remove all container borders */
    border-radius: 0; /* Remove rounded corners */
    height: calc(100vh - 12rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat header - normal styling */
.chat-header {
    padding: 0.75rem;
    border-bottom: none !important; /* Remove horizontal line */
    border: none !important; /* Remove all borders/lines */
    background: var(--bs-card-cap-bg);
    border-radius: 0; /* Remove rounded corners to prevent lines */
}

/* Chat body - scrollable content area */
.chat-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important; /* Important for flex child to be scrollable */
}

/* Chat messages area - normal styling */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--bs-secondary-bg);
    display: flex;
    flex-direction: column;
    /* gap removed - using individual message margins instead */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

/* Chat footer - normal styling */
.chat-input {
    padding: 0.75rem;
    background: var(--bs-secondary-bg); /* Match messages background */
    border-top: none !important; /* Force remove purple line */
    border: none !important; /* Remove all borders */
    border-radius: 0; /* Remove rounded corners to prevent purple spaces */
}

/* Chat input styling */
.chat-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.chat-input-group .form-control {
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 0.75rem 1rem !important;
    flex: 1 !important;
}

.chat-input-group .form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.chat-send-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--bs-primary) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.4rem !important; /* Double the icon size */
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Force larger icon in send button - overrule all other CSS */
.chat-input svg,
#send-message-btn svg,
.btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.chat-send-btn:hover {
    background: var(--bs-primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4) !important;
}

/* Message styling - Different spacing for sent vs received messages */
.message {
    max-width: 75% !important;
    padding: 0.25rem 0.5rem !important; /* Much smaller padding */
    border-radius: 1rem !important;
    word-wrap: break-word !important;
    animation: messageSlideIn 0.3s ease-out !important;
}

.message.sent {
    align-self: flex-end !important;
    background: var(--bs-primary) !important;
    color: white !important;
    margin-left: auto !important;
    margin-bottom: 6px !important; /* More spacing for sent messages */
    border-bottom-right-radius: 0.25rem !important;
}

.message.received,
.message.color-0,
.message.color-1,
.message.color-2,
.message.color-3,
.message.color-4 {
    align-self: flex-start !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    margin-right: auto !important;
    margin-bottom: 2px !important; /* Less spacing for received messages */
    border-bottom-left-radius: 0.25rem !important;
}

.message-time {
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
    margin-top: 0.25rem !important;
    text-align: right !important;
}

/* Message animation */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back button styling */
.chat-back-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.chat-back-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    transform: translateX(-2px) !important;
}

/* Chat title styling */
.chat-title {
    color: white !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 0 1rem !important;
}

/* Header layout */
.chat-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Mobile optimizations - truly fixed header/footer */
@media (max-width: 768px) {
    /* Prevent page scrolling completely */
    .chat-page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        z-index: 1;
        /* Disable all touch scrolling behaviors */
        touch-action: none;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Disable body scrolling when on chat page */
    body.chat-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /* Prevent elastic scroll */
        overscroll-behavior: none;
        -webkit-overscroll-behavior: none;
    }
    
    .chat-page .container {
        height: 100vh;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .chat-page .row {
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    
    .chat-page .col-md-6 {
        height: 100vh;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Chat container takes full viewport */
    .chat-container {
        height: 100vh;
        margin: 0;
        border-radius: 0;
        border: none !important; /* Force remove all borders */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Remove all borders from parent containers on mobile */
    .chat-page .container,
    .chat-page .row,
    .chat-page .col-md-6,
    .chat-page *,
    .chat-container *,
    .page-with-header-space {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }
    
    .chat-page .container,
    .chat-page .row,
    .chat-page .col-md-6 {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Header fixed to top, below top navbar */
    .chat-header {
        position: fixed;
        top: 56px; /* Just below the top navbar, closer positioning */
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--bs-card-cap-bg);
        padding: 0.75rem 1rem;
        border-bottom: none !important; /* Remove horizontal line */
        border: none !important; /* Remove all borders/lines */
    }
    
    /* PWA standalone mode - extra space needed for status bar */
    @media (display-mode: standalone) {
        .chat-header {
            top: 115px !important; /* 25px lower for better positioning */
        }
        
        .chat-messages {
            top: calc(115px + 60px) !important; /* Adjust messages for PWA header position */
        }
    }
    
    /* iOS PWA specific - when installed as PWA */
    body.pwa-standalone .chat-header {
        top: 115px !important; /* 25px lower for PWA mode */
    }
    
    body.pwa-standalone .chat-messages {
        top: calc(115px + 60px) !important; /* Adjust for PWA header */
    }
    
    /* Messages area positioned between fixed header and footer */
    .chat-messages {
        position: fixed;
        top: calc(56px + 60px); /* Updated to match new header position */
        bottom: calc(60px + 90px); /* Bottom navbar + input height + more space */
        left: 0;
        right: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.75rem 1rem;
        background: var(--bs-secondary-bg);
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Disable pull-to-refresh and overscroll */
        overscroll-behavior: contain;
        -webkit-overscroll-behavior: contain;
    }
    
    .chat-messages::-webkit-scrollbar {
        display: none;
    }
    
    /* Input fixed to bottom, above bottom navbar with even more space */
    .chat-input {
        position: fixed;
        bottom: 80px; /* Even more space above bottom navbar */
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--bs-secondary-bg); /* Match messages background instead of body bg */
        border-top: none !important; /* Force remove purple line */
        border: none !important; /* Remove all borders */
        padding: 0.75rem 1rem;
        transition: bottom 0.3s ease; /* Smooth transition when keyboard opens */
    }
    
    /* Hide bottom navbar when keyboard is likely open (viewport height reduced) */
    @media (max-height: 600px) {
        .mobile-navbar {
            display: none !important;
        }
        
        /* Adjust chat input position when bottom nav is hidden */
        .chat-input {
            bottom: 20px; /* Much lower when bottom nav is hidden */
            background: var(--bs-secondary-bg); /* Keep consistent background */
            border-top: none !important; /* Force keep border removed */
            border: none !important; /* Remove all borders */
        }
        
        /* Adjust messages area when bottom nav is hidden - allow more scroll space */
        .chat-messages {
            bottom: calc(20px + 80px); /* Adjust for new input position */
            top: calc(56px + 60px); /* Updated to match new header position */
            /* Add extra padding at top to ensure scroll to very top */
            padding-top: 2rem;
            /* Ensure we can scroll past the visual viewport */
            min-height: calc(100vh - 116px - 100px);
        }
    }
    
    .message {
        max-width: 85%;
    }
    
    .message.sent {
        margin-bottom: 6px !important; /* More spacing for sent messages on mobile */
    }
    
    .message.received,
    .message.color-0,
    .message.color-1,
    .message.color-2,
    .message.color-3,
    .message.color-4 {
        margin-bottom: 2px !important; /* Less spacing for received messages on mobile */
    }
    
    .message-bubble {
        padding: 4px 8px !important; /* Ultra compact padding */
        margin-bottom: 0px !important;
    }
    
    .bubble-sender {
        margin-bottom: 6px !important; /* More spacing to match sent messages */
    }
    
    /* Hide main navigation on mobile chat to prevent conflicts */
    .chat-page .container.mt-2.pt-2 {
        display: none;
    }
}

/* Desktop optimizations */
@media (min-width: 769px) {
    .chat-container {
        height: calc(100vh - 12rem);
    }
}

/* Remove fullscreen classes - not needed anymore */