.bubble-container {
    display: flex;
    margin-bottom: 5px;
    position: absolute;
    z-index: 1000;
    overflow: visible;
    transform-style: preserve-3d;
    transition: transform 0.4s;
    border: var(--select-border-size) rgba(0, 0, 0, 0) solid;
    /* bubble should not use translateZ tip for bubble rotation */
    transform: translate(-50%, -50%) rotateY(0deg);
}

.bubble-container.bbf-flip {
    /* ios 360deg or 1 turn is not working well */
    transform: translate(-50%, -50%) rotateY(-360deg);
}

.bubble-container.bbf-flip-legacy {
    /* ios 360deg or 1 turn is not working well */
    transform: rotateY(-360deg);
}

.bubble-main {
    display: inline-block;
    line-height: 1.2;
    padding: .9em 1.1em .9em;
    color: black;
    white-space: nowrap;
    position: relative;
}

.bubble-media {
    position: relative;
    text-align: center;
    display: inline-block;
    font-family: var(--glitz-default-bubble-font);
    z-index: 1000;
}

.bubble-media-text::selection {
    background: var(--editor-color);
    color: white;
}

.bubble-media-text {
    user-select: text;
    position: relative;
    min-width: 50px;
}

.bubble-media-text-edit:empty:before {
    content: attr(bubble-hint);
    color: #aaa;
    position: absolute;
    font-size: 90%;
    transform: translate(-50%);
    white-space: pre-line;
    width: 100%;
    min-width: 200px;
}

.sticky-media-text-edit:empty:before {
    content: attr(bubble-hint);
    color: #aaa;
    position: absolute;
    font-size: 90%;
}

.bubble-msg-image {
    position: relative;
    min-width: 100%;
    pointer-events: none;
}

.bubble-msg-image-div {
    display: flex;
    object-fit: contain;
    border: var(--select-border-size) rgba(0, 0, 0, 0) solid;
}

.fixed-bubble-main {
    display: flex;
    width: 100%;
    height: 100%;
    line-height: 1.0;
    white-space: normal;
}

.fixed-bubble-media {
    text-align: left;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 10px);
    z-index: 1091;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.bubble-svg {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    pointer-events: none;
}

.bbf-view-color {
    animation: bbf-view-blink 0.5s step-end infinite alternate;
    filter: drop-shadow(3px 3px 2px var(--bbf-view-color2)) drop-shadow(-3px -3px 2px var(--bbf-view-color2));
}

.bbf-navigate-arrow {
    width: 45px !important;
    filter: drop-shadow(1px 1px 1px black) drop-shadow(-1px -1px 1px black);
    position: absolute;
    left: -50px;
    bottom: 0%;
}

@keyframes bbf-view-blink {
    50% {
        filter: drop-shadow(3px 3px 2px var(--bbf-view-color1)) drop-shadow(-3px -3px 2px var(--bbf-view-color1));
    }
}

.bbf-edit-color {
    animation: bbf-edit-blink 0.5s step-end infinite alternate;
    filter: drop-shadow(3px 3px 2px var(--bbf-edit-color2)) drop-shadow(-3px -3px 2px var(--bbf-edit-color2));
}

@keyframes bbf-edit-blink {
    50% {
        filter: drop-shadow(3px 3px 2px var(--bbf-edit-color1)) drop-shadow(-3px -3px 2px var(--bbf-edit-color1));
    }
}

.msg-bubble-svg-effect {
    animation: msg-bubble-blink 0.5s step-end infinite alternate;
    filter: drop-shadow(3px 3px 2px var(--editor-color)) drop-shadow(-3px -3px 2px var(--editor-color));
}

@keyframes msg-bubble-blink {
    50% {
        filter: drop-shadow(3px 3px 2px white) drop-shadow(-3px -3px 2px white);
    }
}