/**
 * Realtime Comments Widget Styles
 */

/* Container */
#mutyun-realtime-comments-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* List Item */
.mutyun-rtc-item {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    margin-bottom: 20px; /* Gap between items */
    padding-bottom: 0;
    list-style: none;
}

/* Animations */
.mutyun-new-item {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
    margin-bottom: 0;
}

.mutyun-item-active {
    opacity: 1;
    max-height: 1000px; /* Allow expansion */
    transform: translateY(0);
    margin-bottom: 20px;
}

.mutyun-remove-item {
    opacity: 0;
    max-height: 0 !important;
    margin-bottom: 0 !important;
    transform: scale(0.9);
}

/* Author & Date Section */
.mutyun-rtc-meta {
    margin-bottom: 5px;
    line-height: 1.3;
}

.mutyun-rtc-author {
    color: var(--mutyun-rtc-author-color, #008000);
    font-weight: bold;
    display: block;
    font-size: 14px;
    text-decoration: none;
}

.mutyun-rtc-author:hover {
    text-decoration: underline;
}

.mutyun-rtc-date {
    color: var(--mutyun-rtc-date-color, #666666);
    font-size: 12px;
    display: block;
}

/* Speech Bubble */
.mutyun-rtc-bubble {
    position: relative;
    background-color: var(--mutyun-rtc-bubble-bg, #ffffff);
    color: var(--mutyun-rtc-bubble-text, #333333);
    border: 1px solid var(--mutyun-rtc-bubble-border, #dddddd);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-top: 8px; /* Space for arrow */
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.5s ease; /* Smooth color transition */
}

/* Highlighted State */
.mutyun-rtc-highlighted .mutyun-rtc-bubble {
    background-color: var(--mutyun-rtc-highlight-color, #ffffcc) !important;
}
.mutyun-rtc-highlighted .mutyun-rtc-bubble::after {
    border-bottom-color: var(--mutyun-rtc-highlight-color, #ffffcc) !important;
}

/* Bubble Arrow (Triangle) */
.mutyun-rtc-bubble::after, .mutyun-rtc-bubble::before {
    content: '';
    position: absolute;
    bottom: 100%; /* Top of bubble */
    left: 20px;
    border: solid transparent;
    height: 0;
    width: 0;
    pointer-events: none;
    transition: border-bottom-color 0.5s ease; /* Transition for arrow color */
}

.mutyun-rtc-bubble::after {
    border-bottom-color: var(--mutyun-rtc-bubble-bg, #ffffff);
    border-width: 8px;
    margin-left: -8px;
}

.mutyun-rtc-bubble::before {
    border-bottom-color: var(--mutyun-rtc-bubble-border, #dddddd);
    border-width: 9px; /* 1px larger for border effect */
    margin-left: -9px;
}

.mutyun-rtc-content-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mutyun-rtc-content {
    word-break: break-all;
    white-space: pre-wrap; /* Preserve newlines */
}

/* Footer (Post Link) */
.mutyun-rtc-footer {
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.mutyun-rtc-icon {
    margin-right: 5px;
    font-style: normal;
}

.mutyun-rtc-footer a {
    text-decoration: none;
    color: inherit; /* Inherit or standard link color */
}
.mutyun-rtc-footer a:hover {
    text-decoration: underline;
}

.mutyun-no-comments {
    padding: 10px;
    text-align: center;
    color: #999;
}