/* The main comment bubble */
.comment-bubble {
    position: relative;
    border-radius: 1rem;
    border: 1px solid #dee2e6;

    /* Bootstrap's default border color */
    background-color: rgb(238, 234, 234);
    overflow: visible;

    /* Ensures the tail doesn't get clipped */
}

/* The tail */
.comment-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;

    /* Shifts down to point outwards */
    left: 30px;

    /* Horizontal positioning */
    width: 50px;
    height: 50px;
    background-color: inherit;

    /* Matches bubble color */
    border-right: 1px solid #dee2e6;

    /* Right border becomes bottom-right edge */
    border-bottom: 1px solid #dee2e6;

    /* Bottom border becomes bottom-left edge */
    transform: rotate(45deg);

    /* Rotates square into a triangle */
    box-shadow: inherit;

    /* Copies the card's shadow settings */
    z-index: -1;

    /* Keeps shadow behind the card's text body */
}

/* Keeps the shadow crisp and prevents inner clipping */
.comment-bubble-wrapper {
    filter: drop-shadow(0 .125rem .25rem rgba(0,0,0,.075));

    /* Matches Bootstrap's .shadow-sm */
}

.lightbox {
    background-color: rgba(0, 0, 0, 0.45);
}