﻿/* ============================================================
   Modern Chat Conversation – CSS Override for Kunena Aurelis
   Place AFTER kunena.css
   ============================================================ */

/* Overall Container */
#kunena.layout {
    background: #f4f5f7;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Remove table-like visuals and spacing */
#kunena.layout .kmessage,
#kunena.layout .message,
#kunena.layout .kmsg {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
}

/* Message Wrapper – Chat Bubble Layout */
#kunena.layout .kmessage .kmessage-body,
#kunena.layout .message .kmessage-body,
#kunena.layout .kmsg .kmessage-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Avatar styling – round, small */
#kunena.layout .kavatar img,
#kunena.layout .rounded-circle img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, 0px 1px 3px rgba(0,0,0,0.15);
}

/* Hide large avatar containers */
#kunena.layout .kmessage .kmessage-avatar,
#kunena.layout .message .kmessage-avatar {
    margin-right: 10px !important;
}

/* Chat bubble container */
#kunena.layout .kmessage .kmessage-msg,
#kunena.layout .message .kmessage-msg,
#kunena.layout .kmsg .kmessage-msg {
    max-width: 75%;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.45;
    font-size: 14.5px;
    color: #333;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.05);
}

/* Remove inner borders and bloated sections */
#kunena.layout .kmsg-header,
#kunena.layout .kmsgfooter,
#kunena.layout .kmessagepadding,
#kunena.layout .kmessage > hr {
    display: none !important;
}

/* Username above message */
#kunena.layout .kmessage .kmsg-author,
#kunena.layout .kmsg .kmsg-author {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    margin-bottom: 2px;
}

/* Right-side alignment for message from current user */
#kunena.layout .kmessage.kmyown .kmessage-body,
#kunena.layout .message.kmyown .kmessage-body {
    flex-direction: row-reverse !important;
}

#kunena.layout .kmessage.kmyown .kmessage-msg,
#kunena.layout .message.kmyown .kmessage-msg {
    background: #d6e9ff !important;
    border-radius: 14px;
    color: #1a2a3a;
}

/* Remove spacing artifacts for user messages */
#kunena.layout .kmessage.kmyown .kmessage-avatar {
    margin-left: 10px !important;
}

/* Timestamp styling */
#kunena.layout .kmessage .kmsgdate,
#kunena.layout span.ksig,
#kunena.layout .msgfooter {
    font-size: 11px !important;
    opacity: 0.55;
    padding: 0;
    margin: 4px 0 0 0 !important;
}

/* Clean quote block */
#kunena.layout blockquote {
    border-left: 3px solid #c0d0e0 !important;
    background: #f7f9fc !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    font-size: 13px !important;
}

/* Image attachments – make slim and modern */
#kunena.layout .kmsgimage img {
    border-radius: 10px;
    margin: 8px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Remove all excessive spacing between messages */
#kunena.layout ul#messages li {
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

/* Polls, signatures, and misc spacing cleanup */
#kunena.layout .ksignature,
#kunena.layout .kpoll,
#kunena.layout .ksig {
    margin-top: 6px !important;
}

/* Buttons inside messages – slimline ghost style */
#kunena.layout .btn,
#kunena.layout .kmsgfooter .btn {
    background: transparent !important;
    border: 1px solid #ddd !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

/* Input area – make chat-like */
#kunena.layout #postform,
#kunena.layout .qreply {
    border-radius: 12px;
    padding: 15px;
    background: #fff;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
}

/* Mobile enhancements */
@media (max-width: 600px) {
    #kunena.layout .kmessage .kmessage-msg {
        max-width: 88%;
        font-size: 14px;
    }
}