/*The styles of the input section have been duplicated in three different files the messages.css, the singleCar.css and the singelCar.html so when making changes
to avoid conflics the changes are to be updated in these three areas*/

/* Messaging component styles */
#messages-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    max-height: 250px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#messages-container::-webkit-scrollbar {
    width: 6px;
}

#messages-container::-webkit-scrollbar-track {
    background: transparent;
}

#messages-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

.message {
    padding: 8px 12px;
    border-radius: 12px;
    max-width: 80%;
    word-break: break-word;
    position: relative;
}

.message-sent {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
}

.message-received {
    align-self: flex-start;
    background-color: #495057;
    color: white;
    border-bottom-left-radius: 4px;
}

.message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    margin-top: 4px;
    opacity: 0.8;
}

.message-time {
    margin-right: 4px;
}

.message-status i {
    font-size: 0.9rem;
}

#typing-indicator {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    height: 20px;
}

.typing-dots span {
    display: inline-block;
    animation: dot-pulse 1.5s infinite linear;
    opacity: 0.7;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dot-pulse {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    20% {
        transform: scale(1.2);
        opacity: 1;
    }
}

#seller-online-status {
    font-size: 0.8rem;
    height: 20px;
    margin-bottom: 8px;
}

/* Enhanced Message Input */
.message-section .message-input-wrapper,
.custom-message-input {
    position: relative !important;
    border-radius: 12px !important;
    background-color: rgba(30, 30, 30, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease !important;
    overflow: visible !important; /* Changed from hidden to visible */
    display: flex !important;
    align-items: center !important;
    min-height: 53px !important; /* Increased by 10% */
    height: 53px !important; /* Added fixed height */
    z-index: 102 !important; /* Higher z-index to ensure it stays on top */
}

.message-section .message-input-wrapper:focus-within,
.custom-message-input:focus-within {
    border-color: rgba(13, 110, 253, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

.message-section .message-input-buttons,
.custom-message-input .message-input-buttons {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important; /* Reduced to match the smaller button */
    bottom: auto !important;
    flex-direction: row !important;
    width: auto !important;
    z-index: 10 !important;
    margin-right: 0 !important;
}

.message-section #message-input,
.custom-message-input #message-input {
    border-radius: 12px !important;
    padding: 10px 80px 4px 15px !important; /* Updated padding: top 10px, bottom 4px */
    resize: none !important;
    border: none !important;
    background-color: transparent !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important; /* Reduced line height by 75% for closer lines */
    transition: all 0.2s ease !important;
    height: 53px !important; /* Fixed height - increased by 10% */
    min-height: 53px !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important; /* Changed to flex-start for multi-line text */
    justify-content: flex-start !important;
}

.message-section #message-input:focus,
.custom-message-input #message-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.message-section #message-input::placeholder,
.custom-message-input #message-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* Vertical Divider */
.message-section .message-input-divider,
.custom-message-input .message-input-divider {
    width: 1px !important;
    height: 20px !important; /* Reduced height to match the smaller send button */
    background-color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 6px !important; /* Reduced margin */
    display: block !important;
}

/* Send Button */
.message-section .send-btn,
.custom-message-input .send-btn,
.message-section #send-message-btn,
.custom-message-input #send-message-btn {
    width: 40px !important; /* Reduced by 25% from 53px */
    height: 40px !important; /* Reduced by 25% from 53px */
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    border: none !important;
    margin-right: 6px !important; /* Added margin to prevent cropping */
}

.message-section .send-btn:hover,
.custom-message-input .send-btn:hover,
.message-section #send-message-btn:hover,
.custom-message-input #send-message-btn:hover {
    transform: scale(1.05) !important;
    background: linear-gradient(135deg, #0b5ed7, #084298) !important;
    opacity: 1 !important;
}

.message-section .send-btn:active,
.custom-message-input .send-btn:active,
.message-section #send-message-btn:active,
.custom-message-input #send-message-btn:active {
    transform: scale(0.95) !important;
}

.message-section .send-btn i,
.custom-message-input .send-btn i,
.message-section #send-message-btn i,
.custom-message-input #send-message-btn i {
    font-size: 1.2rem !important; /* Reduced size to match the smaller button */
    margin-left: 2px !important; /* Adjusted margin */
    margin-right: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
}

/* Bootstrap Icons specific fix */
.custom-message-input .bi,
#emoji-btn .bi,
#send-message-btn .bi {
    display: inline-block !important;
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}



/* Quick Reply Suggestions */
.message-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.suggestion-btn {
    border-radius: 16px;
    font-size: 0.85rem;
    padding: 4px 12px;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.suggestion-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Emoji Picker */
.emoji-picker {
    position: absolute;
    bottom: 40px;
    right: 40px; /* Adjusted position to be more centered */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 200px;
    max-width: 100%;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: #212529;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
}

.emoji-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.emoji-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Visual feedback for buttons */
.suggestion-btn.active {
    background-color: rgba(13, 110, 253, 0.3);
    transform: scale(0.95);
}

.send-btn.sending {
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Disabled message input for owner */
#message-input:disabled {
    background-color: rgba(30, 30, 30, 0.2) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
}

#message-input:disabled::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

/* Owner message info */
#owner-message-info {
    background-color: rgba(13, 110, 253, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-left: 3px solid rgba(13, 110, 253, 0.5);
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shake animation for invalid input */
.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Mobile Optimizations */
@media (max-width: 576px) {
    .message-suggestions {
        gap: 6px;
    }

    .suggestion-btn {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    #message-input {
        padding: 10px 70px 4px 12px !important; /* Updated padding: top 10px, bottom 4px */
        font-size: 0.9rem !important;
        line-height: 1.2 !important; /* Reduced line height for mobile */
        display: flex !important;
        align-items: flex-start !important; /* Changed to flex-start for multi-line text */
    }

    .emoji-btn {
        right: 45px;
        width: 32px;
        height: 32px;
    }

    .send-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .emoji-picker {
        width: 180px;
        bottom: 45px;
    }

    .emoji-item {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* Car details preview in messages */
.car-details-preview {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: rgba(30, 30, 30, 0.6);
    border-left: 3px solid #6c757d;
    font-size: 0.85rem;
}

.message-sent .car-details-preview {
    border-left-color: #007bff;
}

.message-received .car-details-preview {
    border-left-color: #6c757d;
}

.car-details-preview .fw-bold {
    color: #fff;
    margin-bottom: 2px;
}

.car-details-preview .text-primary {
    color: #4da3ff !important;
}