/* Styles for Mini-Pop-Ups */

/* Shared container chrome */
.mpuc_container {
    display: block;
    position: fixed;
    z-index: 100;
    padding: 8px 15px;
    background-color: #820000;
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
    box-sizing: border-box;
    overflow:hidden;
}

/* --- Automatic on Scroll layout: slides up from the bottom --- */
.mpuc_container.mpuc_layout_auto_scroll {
    right: 8%;
    width: 325px;
    transition: bottom 1s ease 0s;
}




/* --- Manual Chat Box layout: anchored bottom-right, click to expand --- */
.mpuc_container.mpuc_layout_manual_chat {
    bottom: 52px;
    right: 52px;
    width: 194px;
    height: 60px;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease, bottom 0.3s ease, right 0.3s ease;
}

/* Manual Chat Box layout - Mobile as expanded default: when expanded, the chat box becomes a bottom drawer */
.mpuc_container.mpuc_layout_manual_chat.mpuc_expanded {
    width: 100vw;
    height: 95vh;
    bottom: 0;
    right: 0;
}

/* Expanded on wider screens */
@media (min-width: 500px) {
    .mpuc_container.mpuc_layout_manual_chat.mpuc_expanded {
        width: 400px;
        height: 650px;
        cursor: default;
        right: 52px;
    }
}
/* Hiding inert scrollbar outside of the mpuc_expanded bounds */
.mpuc_container.mpuc_layout_manual_chat.mpuc_expanded iframe {
    width:calc(100% + 15px)!important;
}
.mpuc_container.mpuc_layout_manual_chat .mpuc_title {
    margin: 0;
    line-height: 1.2;
}
.mpuc_container.mpuc_layout_manual_chat .mpuc_title_minimized {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpuc_container.mpuc_layout_manual_chat .mpuc_content {
    margin-top: 12px;
    max-height: calc(100% - 50px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
/* Internal scrolling only kicks in when the editor allows scrollable content. */
.mpuc_container.mpuc_layout_manual_chat .mpuc_content.scrollable {
    overflow-y: auto;
}
.mpuc_container.mpuc_layout_manual_chat .mpuc_content.scrollable iframe {
    width:100%;
}
.mpuc_container.mpuc_layout_manual_chat.mpuc_expanded .mpuc_content {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease 0.15s, visibility 0s linear 0s;
}
/* Button rotation in manual_chat is driven by the parent's expanded class
   (the .inverted class is only used by the auto_scroll JS). */
.mpuc_container.mpuc_layout_manual_chat .mpuc_expand_bttn {
    transform: rotate(180deg);
}
.mpuc_container.mpuc_layout_manual_chat.mpuc_expanded .mpuc_expand_bttn {
    transform: rotate(0deg);
}



/* --- Shared button + content typography (used by both layouts) --- */
.mpuc_expand_bttn {
    position: absolute;
    cursor: pointer;
    font-size: 0.9em;
    top: 14px;
    right: 15px;
    z-index: 5;
    color: #f7f7f7;
    transition: transform 0.4s ease 0s;
}
.mpuc_expand_bttn.inverted {
    transform: rotate(180deg);
}
.mpuc_title {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
    padding-right: 25px;
}
/* Show the minimized title by default; the parent's .mpuc_expanded class
   swaps to the expanded title. Empty title elements still take no visible
   space because the <p> renders without text. */
.mpuc_title_expanded {
    display: none;
}
.mpuc_title_minimized {
    display: block;
}
.mpuc_container.mpuc_expanded .mpuc_title_expanded {
    display: block;
}
.mpuc_container.mpuc_expanded .mpuc_title_minimized {
    display: none;
}
.mpuc_content, .mpuc_content label, .mpuc_content .nf-field-label {
    color: #f7f7f7;
}
.mpuc_content .nf-label-span, .mpuc_content .nf-field-label label, .mpuc_content label {
    font-size: 15px;
}
.mpuc_content .nf-field-container {
    margin-bottom: 10px;
}
.mpuc_content .listradio-wrap ul {
    display: flex;
    width: 100%;
    padding: 0;
}
.mpuc_content .listradio-wrap ul li {
    width: 40%;
    color: #f7f7f7;
}
.mpuc_content input, .mpuc_content textarea, .mpuc_content input[type="radio"] {
    background-color: #f7f7f7;
    border: none;
    padding: 2px;
    max-height: 300px;
}
.mpuc_content .nf-field input[type="submit"] {
    background-color: #006CB8;
    color: #f7f7f7;
}
.mpuc_content .nf-field input[type="submit"]:is(:hover, :focus, :active) {
    text-decoration: none;
    background-color: #00548f;
    color: #ffffff;
}
.mpuc_content.scrollable {
    overflow-y:auto;
}