/* ---------- TOGGLE BUTTON ---------- */
#ol-chat-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;

    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M1.038%203.816C.736%204.518.82%205.428.992%207.248l.6%206.4c.144%201.537.216%202.305.562%202.886a3%203%200%200%200%201.291%201.176c.61.29%201.383.29%202.926.29H7.84c.056%200%20.084%200%20.105.01a.1.1%200%200%201%20.044.045c.01.021.01.049.01.105v4.047c0%20.095%200%20.143.02.17a.1.1%200%200%200%20.074.04c.033.002.073-.024.153-.076l6.714-4.316c.015-.009.022-.014.03-.017a.098.098%200%200%201%20.022-.006c.009-.002.017-.002.035-.002h2.582c1.543%200%202.315%200%202.925-.29a3%203%200%200%200%201.292-1.176c.346-.581.418-1.35.562-2.886l.6-6.4c.17-1.82.256-2.73-.046-3.432a3%203%200%200%200-1.32-1.45C20.97%202%2020.057%202%2018.229%202H5.77c-1.828%200-2.742%200-3.413.366a3%203%200%200%200-1.32%201.45ZM12%208.5a1.5%201.5%200%200%200%200%203h.01a1.5%201.5%200%200%200%200-3H12ZM6%2010a1.5%201.5%200%200%201%201.5-1.5h.01a1.5%201.5%200%200%201%200%203H7.5A1.5%201.5%200%200%201%206%2010Zm10.5-1.5a1.5%201.5%200%200%200%200%203h.01a1.5%201.5%200%200%200%200-3h-.01Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;

    background-color: black;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;

    cursor: pointer;
    opacity: 0.7;
    transition: opacity 150ms ease-in-out;
}

#ol-chat-toggle:hover {
    opacity: 1;
}

#ol-chat-toggle.left  { right: auto; left: 1rem; }
#ol-chat-toggle.right { left: auto; right: 1rem; }
#ol-chat-toggle.center { left: 50%; transform: translateX(-50%); }


/* ---------- POPUP BASE ---------- */
#ol-chat-popup {
    background-color: #FFF;
    border: 1px solid black;
    border-radius: 1rem;
    position: fixed;

    bottom: 1rem;
    right: -100%;
    color: black;

    width: 50vw;
    height: 50vh;

    display: flex;
    flex-direction: column;

    transition:
      right 500ms ease-in-out,
      left 500ms ease-in-out,
      bottom 500ms ease-in-out,
      transform 500ms ease-in-out;
}

/* ---------- LEFT MODE ---------- */
#ol-chat-popup.left,
#ol-chat-popup.left.closed {
    right: auto;
    left: -100%;
}

#ol-chat-popup.left.opened {
    left: 1rem;
}

/* ---------- RIGHT MODE ---------- */
#ol-chat-popup.right,
#ol-chat-popup.right.closed {
    left: auto;
    right: -100%;
}

#ol-chat-popup.right.opened {
    right: 1rem;
}

/* ---------- CENTER (BOTTOM SLIDE-UP) MODE ---------- */
#ol-chat-popup.center,
#ol-chat-popup.center.closed {
    right: auto;
    left: 50%;

    bottom: -100%;
    transform: translateX(-50%);
}

#ol-chat-popup.center.opened {
    bottom: 1rem;
    transform: translateX(-50%);
}


/* ---------- INTERNAL ELEMENTS ---------- */
#ol-chat-popup .error {
    color: #fb2c36;
    padding: 0 0.5rem 0.5rem;
    text-align: center;
}

#ol-chat-popup .chat-embed-container {
    flex: 1;
    padding: 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
}

#ol-chat-popup .chat-embed-container iframe {
    flex: 1;
}

#ol-chat-popup-close { 
    border: none;
    padding: 0.5rem;
    font-size: 1.5rem;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 150ms ease-in-out;
}

#ol-chat-popup-close:hover { 
    opacity: 1;
}


/* ---------- MOBILE FULLSCREEN OVERRIDE ---------- */
@media (max-width: 576px) {
    #ol-chat-popup {
        width: 100vw !important;
        height: 100dvh !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        margin: 0;
        border: none;
        border-radius: 0;

        /* hidden/closed by default */
        transform: translateY(100%);

        /* replace position slide with transform slide */
        transition: transform 300ms ease-in-out !important;
    }

    #ol-chat-popup.closed {
        transform: translateY(100%);
    }

    #ol-chat-popup.opened {
        transform: translateY(0);
    }
}