/* Hide thumbnail in booking tab within agent interface */
#bookingFormContainer .bkThumbnail,
#bookPanel .bkThumbnail,
#bookingFormContainer img.bkThumbnail,
#bookPanel img.bkThumbnail {
    display: none !important;
    visibility: hidden !important;
}

/* Agent Query Header Base Styles */
#agentQueryHeader {
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Summary label view (mobile only) */
#agentQueryHeaderSummary {
    cursor: pointer;
    user-select: none;
}

#agentSelectionModal {
    z-index:3000;
}

#agentQueryHeaderSummary:hover {
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/* Summary icon */
#agentQuerySummaryIcon {
    font-size: 18px;
    color: #0d6efd;
}

/* Summary dates text */
#agentQuerySummaryDates {
    font-size: 14px;
    font-weight: 500;
    color: #0d6efd;
}

/* Summary occupancy text */
#agentQuerySummaryOccupancy {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

/* Summary chevron icon */
#agentQueryHeaderChevron {
    font-size: 16px;
    color: #6c757d;
    transition: transform 0.2s;
}

/* Collapsible agentQueryHeader on mobile */
@media (max-width: 991.98px) {
    #agentQueryHeader {
        padding: 10px 0px 6px 12px !important;
    }
    
    /* Ensure form is collapsed by default on mobile */
    #agentQueryHeaderForm {
        margin-top: 10px;
    }
    
    /* Reduce form element sizes when expanded */
    #agentQueryHeaderForm .singleDatepickerLabel {
        font-size: 11px;
        margin-bottom: 2px;
        line-height: 1.2;
    }
    
    #agentQueryHeaderForm .hpCalendarContainer {
        height: 32px !important;
        padding: 3px 0px 3px 8px !important;
    }
    
    #agentQueryHeaderForm .calendarSingle {
        padding: 3px 0px 3px 8px !important;
    }
    
    #agentQueryHeaderForm .singleDateInput {
        font-size: 12px;
        padding-top: 2px !important;
        max-width: 110px;
    }
    
    #agentQueryHeaderForm .calendarSingleTrigger {
        font-size: 14px;
        top: 2px !important;
    }
    
    #agentQueryHeaderForm .occupancyIncrementerLabelhd {
        font-size: 12px;
        width: 75px !important;
        padding: 0 3px;
    }
    
    #agentQueryHeaderForm .occupancyIncrementerActive,
    #agentQueryHeaderForm .occupancyIncrementerInactive {
        font-size: 14px;
    }
    
    #agentQueryHeaderForm .mb-3 {
        margin-bottom: 0.5rem !important;
    }
}

#AgentColumnB {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Desktop: Ensure columns have proper height and match each other */
@media (min-width: 992px) {
    #agentStack {
        min-height: calc(100vh - 200px); /* Viewport height minus header/query form space */
        align-items: stretch; /* Make columns equal height */
    }
    
    #AgentColumnB {
        min-height: calc(100vh - 250px); /* Use viewport height minus header space */
        height: calc(100vh - 250px); /* Set explicit height on desktop */
    }
    
    #AgentColumnA {
        min-height: calc(100vh - 250px) !important; /* Use viewport height minus header space */
        height: calc(100vh - 250px) !important; /* Set explicit height on desktop - match ColumnB */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Prevent content from overflowing */
    }
    
    /* Ensure chatHistory expands to fill available space in ColumnA */
    #chatHistory {
        flex: 1 1 auto !important;
        min-height: 0 !important; /* Allow shrinking below min-height */
        max-height: none !important; /* Remove any max-height constraints */
        overflow-y: auto;
    }
}

/* Toggle Control Styling */
.view-toggle-control {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.toggle-btn {
    padding: 6px 16px;
    border: 1px solid #dee2e6;
    background-color: transparent;
    color: #495057;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.toggle-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.toggle-btn.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.toggle-btn.active:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

#AgentColumnB #viewTabContent {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#AgentColumnB .tab-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important; /* Override Bootstrap's display: none */
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#AgentColumnB .tab-pane:not(.active) {
    display: none !important; /* Hide inactive tabs */
}

#AgentColumnB #mapPanel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0; /* Ensure map extends to top */
}

#AgentColumnB #map {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Chat column flex layout to keep input visible */
#AgentColumnA {
    display: flex;
    flex-direction: column;
    min-height: 60px;
    overflow: visible;
    height: 100%;
}

/* Desktop: Override any JavaScript height settings */
@media (min-width: 992px) {
    #AgentColumnA {
        height: calc(100vh - 250px) !important; /* Force height on desktop */
    }
}



#chatHistory {
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
    max-height: calc(100% - 70px);
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto; /* Changed from contain to allow native scrolling */
    cursor: text;
    user-select: text;
    touch-action: pan-y; /* Explicitly allow vertical panning */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}


#chatHistorySpacer {
    height: 42px; /* Increased height to ensure last message is fully visibl due to the overlap of the chat input form */
    flex-shrink: 0;
    width: 100%;
}

/* Only show spacer on mobile breakpoints */
@media (min-width: 992px) {
    #chatHistorySpacer {
        display: none;
    }
}

#chatHistory::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Chat Header */
#chatHeader {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 2px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

#chatHeaderContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

#chatHeaderAgentInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

#chatHeaderIconGroup {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#conversationSelectButton {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.25rem;
    transition: opacity 0.2s ease;
}

#conversationSelectButton:hover {
    opacity: 0.7;
}

#conversationSelectButton:focus {
    box-shadow: none;
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 4px;
}

#newChatButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    transition: opacity 0.2s ease;
}

#newChatButton:hover {
    opacity: 0.7;
}

#newChatButton:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 4px;
}

.chat-header-agent-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dee2e6;
    flex-shrink: 0;
}

#chatHeaderTitle {
    margin: 0;
    font-weight: bold;
}

.detailsSectionLabel {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1.2em;
}

/* Map popup styling for hotel markers */
.agent-map-popup {
    max-width: 400px;
    font-family: inherit;
}

.agent-map-popup-header {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-map-popup-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.agent-map-popup-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.agent-map-popup-thumbnail-wrapper {
    flex-shrink: 0;
}

.agent-map-popup-thumbnail {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.agent-map-popup-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
}

.agent-map-popup-button {
    padding: 2px 10px;
    font-size: 0.8rem;
    align-self: flex-end;
}

.agent-map-popup-price {
    margin: 0 0 6px 0;
    font-size: 1.2em;
    color: #28a745;
    font-weight: bold;
}

.agent-map-popup-soldout {
    margin: 0 0 6px 0;
    font-size: 1.2em;
    color: #dc3545;
    font-weight: bold;
}

/* Hotel Image Gallery Styles */
.hotel-image-gallery {
    position: relative;
}

.hotel-gallery-main {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    height: 400px; /* Fixed height to prevent button movement */
}

.hotel-gallery-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hotel-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fill container without distortion */
}

.hotel-gallery-image:hover {
    opacity: 0.9;
}

/* Featured Amenities Styles */
.featuredAmenityRow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.featuredAmenity {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feaaturedHotelIcon {
    margin-bottom: 5px;
}

.featuredAmenityLabel {
    font-size: 12px;
    text-align: center;
    color: #333;
}

.hotel-gallery-prev,
.hotel-gallery-next {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hotel-gallery-prev:hover,
.hotel-gallery-next:hover {
    background: rgba(255,255,255,0.95) !important;
    transform: translateY(-50%) scale(1.1);
}

.hotel-gallery-prev:active,
.hotel-gallery-next:active {
    transform: translateY(-50%) scale(0.95);
}

.hotel-gallery-counter {
    font-weight: 500;
    pointer-events: none;
}

#conversationSelect {
    width: auto;
    min-width: 200px;
}

#newChatButton {
    color: #0d6efd;
    cursor: pointer;
}

/* Chat History */
#chatHistory {
    padding: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

/* Chat Input Form */
#chatInputForm {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 15px 15px 0px 15px;
    background-color: #f8f9fa;
}

/* Input Group Styling */
#chatInputForm .input-group {
    position: relative;
    display: flex;
    align-items: center;
}

#chatInputForm .input-group .form-control {
    flex: 1;
    border-radius: 24px;
    padding: 12px 60px 12px 20px; /* Extra right padding for button */
}

#chatInputForm .input-group .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Send Button Styling - positioned inside input field */
#sendButton {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: white;
    color: #0d6efd;
    transition: background-color 0.2s ease;
    z-index: 5;
    border-radius: 40px !important;
}

.bi-arrow-up-circle-fill {
    color: #0d6efd;
    font-size: 2em;
}

#sendButton:hover {
    background-color: #0b5ed7;
}

#sendButton:active {
    background-color: #0a58ca;
}

#sendButton:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.detailsSectionLabel {
    margin-bottom: 5px;
    font-size: 1.2em;
}

.descriptionText {
    font-size: 1em;
    line-height: 1.5;
}

/* Fixed width for Complete Booking buttons so spinner doesn't resize them */
.btn-book-room {
    min-width: 160px;      /* Adjust as needed for your label length */
    text-align: center;
    white-space: nowrap;
}

/* Hotel Details Panel */
#hotelDetails {
    padding: 20px;
    padding-top: 60px; /* Add extra top padding to account for toggle control */
    overflow-y: auto;
    background-color: #ffffff;
    flex: 1 1 auto;      /* Fill available height within detailsPanel */
    min-height: 0;       /* Allow it to shrink within flex container */
}

/* Booking Form Container */
#bookingFormContainer {
    padding: 20px;
    padding-top: 60px; /* Add extra top padding to account for toggle control */
    overflow-y: auto;
    background-color: #ffffff;
    flex: 1 1 auto;      /* Fill available height within bookPanel */
    min-height: 0;       /* Allow it to shrink within flex container */
}

#bookingFormPlaceholder {
    padding-top: 200px;
}

/* First Content */
#firstContent {
    margin: 0;
}

/* Mobile stacked layout resizer */
@media (max-width: 991.98px) {
    /* Fixed height container for agent stack - height set by JavaScript */
    #agentStack {
        display: flex;
        flex-direction: column;
        gap: 0 !important; /* Override Bootstrap's .g-3 gap spacing on mobile */
        overflow: visible;
        position: relative;
        /* Height will be set by JavaScript to prevent columnA from expanding */
    }
    #agentStack .stack-top {
        height: var(--stack-top-height, 35vh);
        min-height: 5vh; /* Reduced to allow columnB to be almost completely hidden */
    }
    #agentStack .stack-bottom {
        min-height: 70px; /* Minimum height for columnA - enforced by JavaScript as well */
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
        padding-top: 0 !important; /* Remove any top padding that might create whitespace */
        margin-top: 0 !important; /* Remove any top margin from Bootstrap columns */
    }
    #stackResizeHandle {
        position: relative;
        height: 8px;
        background: white; /* The 4px white bar */
        border-top: 1px solid #96a4b1; /* Dark grey border on top */
        border-bottom: 1px solid #96a4b1; /* Dark grey border on bottom */
        cursor: row-resize;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        width: 100%;
        flex: 0 0 auto;
        transition: background-color 0.2s ease;
        z-index: 2000;
    }
    
    /* Extended touchable area in the center */
    #stackResizeHandle::before {
        content: '';
        position: absolute;
        width: 50px; /* Width of grip area */
        height: 16px; /* 2px above + 4px + 2px below */
        top: -5px; /* Extends 2px above */
        left: 50%;
        transform: translateX(-50%);
        background: white; /* Solid white background for this section */
        border-top: 1px solid #96a4b1; /* Dark grey border on top */
        border-bottom: 1px solid #96a4b1; /* Dark grey border on bottom */
        z-index: 0;
        border-radius: 5px;
    }
    
    /* Three grip lines */
    #stackResizeHandle::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 16px;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        background: 
            linear-gradient(to bottom, 
                transparent 0px, transparent 2px,
                rgba(0, 0, 0, 0.3) 2px, rgba(0, 0, 0, 0.3) 3px,
                transparent 3px, transparent 4px,
                rgba(0, 0, 0, 0.3) 4px, rgba(0, 0, 0, 0.3) 5px,
                transparent 5px, transparent 6px,
                rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.3) 7px,
                transparent 7px
            );
        z-index: 1;
    }
}

@media (min-width: 992px) {
    #stackResizeHandle {
        display: none;
    }
}

/* Chat message styles */
.chat-message {
    margin-bottom: 10px;
}

.chat-message[data-user="true"] {
    text-align: right;
}

.chat-message[data-user="false"] {
    text-align: left;
}

.chat-message-content {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 15px;
    margin: 0;
    max-width: 80%;
    white-space: pre-wrap;
    text-align: left;
}

.chat-message[data-user="true"] .chat-message-content {
    background-color: #007bff;
    color: #ffffff;
}

.chat-message[data-user="false"] .chat-message-content {
    background-color: #e9ecef;
    color: #000000;
}

/* Loading indicator styles */
#loadingIndicator {
    margin-bottom: 10px;
    text-align: left;
}

#loadingIndicator p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 15px;
    margin: 0;
    background-color: #e9ecef;
    color: #6c757d;
}

/* Load more hotels button */
#loadMoreHotelsBtn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background-color: #007bff;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 2100;
    font-weight: 600;
}

.mapboxgl-popup {
    z-index: 2200;
}

#map {
    position: relative;
}

/* Copy feedback toast */
.copy-feedback-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    z-index: 10000;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: opacity 0.3s;
}

/* Mobile columnA positioning */
@media (max-width: 991.98px) {
    #agentStack .stack-bottom {
        position: relative;
        padding-top: 0 !important; /* Ensure no top padding from Bootstrap columns */
    }
    
    /* Remove top padding and margin from columnA on mobile to eliminate whitespace above resize handle */
    #AgentColumnA {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* Center bodyContainer on the page - override Bootstrap's m-0 class */
#bodyContainer.container {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 1396px !important;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* On larger screens, ensure it centers properly */
@media (min-width: 1400px) {
    #bodyContainer.container {
        width: 1396px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Agent Selection Modal Styles */
.agent-modal-list {
    max-height: 70vh;
    overflow-y: auto;
}

.agent-modal-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.agent-modal-item:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.agent-modal-item:last-child {
    margin-bottom: 0;
}

.agent-modal-thumbnail {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    margin-right: 20px;
}

.agent-modal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-modal-name {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

.agent-modal-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Agent Selection Page Styles */
.agent-selection-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.agent-selection-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.agent-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.agent-card-link:hover {
    text-decoration: none;
}

.agent-card-link:visited {
    color: inherit;
}

.agent-card {
    flex: 0 1 auto;
    min-width: 280px;
    max-width: 320px;
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.agent-image-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.agent-profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-name {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

.agent-description {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.no-agents-message {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 18px;
}

/* Responsive design for agent selection */
@media (max-width: 768px) {
    .agent-selection-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .agent-card {
        width: 100%;
        max-width: 100%;
    }
    
    .agent-name {
        font-size: 24px;
    }
    
    .agent-description {
        font-size: 14px;
    }
}