/* Arctic Cheats storefront chat button and window frame. #807 moved this out of partials/chat/launcher.blade.php
   (design notes there); loaded only where the chat button shows (the chat's 'site' mode). */
.ac-chat-launcher {
    position: fixed; z-index: 2147482800;
    left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: #1ee8c3; color: #04241d;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    transition: background-color 160ms ease, transform 160ms ease, opacity 120ms linear;
    -webkit-tap-highlight-color: transparent;
}
/* Desktop: centred on the message field the button turns into (field 22 px inside the window, which sits
   20 px from the corner; 72 px button on a 52.8 px field 30.8 px up), so the bar only stretches to the right.
   Phones: 20 px in. */
@media only screen and (min-width: 668px) {
    .ac-chat-launcher { left: calc(42px + env(safe-area-inset-left, 0px)); bottom: calc(41px + env(safe-area-inset-bottom, 0px)); }
}
.ac-chat-launcher[hidden], .ac-chat-launcher__dot[hidden] { display: none; }
.ac-chat-launcher:hover { background: #19faa2; }
.ac-chat-launcher:active { transform: translateY(1px); }
.ac-chat-launcher:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.ac-chat-launcher.is-away { opacity: 0; pointer-events: none; }
.ac-chat-launcher svg { width: 36px; height: 36px; display: block; }
.ac-chat-launcher__dot {
    position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 50%;
    background: #ff9800; border: 2px solid #0e0e10;
}
.ac-chat-shell, .ac-chat-field { position: fixed; visibility: hidden; pointer-events: none; overflow: hidden; }
.ac-chat-shell.is-on, .ac-chat-field.is-on { visibility: visible; }
.ac-chat-shell { z-index: 2147482900; background: #151518; }
/* The chat header's height (measured with the widget theme: 57 px on phones, 60 px in the larger desktop window). */
.ac-chat-shell__head { display: block; height: 57px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
@media only screen and (min-width: 668px) { .ac-chat-shell__head { height: 60px; } }
/* The widget theme's message field: #131316 fill, 11 px corners, mint ring while focused. */
.ac-chat-field { z-index: 2147482950; background: #131316; }
.ac-chat-field__mint, .ac-chat-field__flash { position: absolute; inset: 0; }
.ac-chat-field__mint { background: #1ee8c3; }
.ac-chat-field__flash { background: #ffffff; opacity: 0; }
.ac-chat-field__icon { position: absolute; width: 36px; height: 36px; color: #04241d; }
/* Chatwoot's window: held invisible while our layer shapes it, faded out over the layer on close. */
#cw-widget-holder.ac-cw-hold { opacity: 0 !important; transition: none !important; transform: none !important; }
#cw-widget-holder.ac-cw-leave {
    visibility: visible !important; z-index: 2147483000 !important; transform: none !important;
    opacity: 0; transition: opacity 160ms linear !important; pointer-events: none;
}
@media only screen and (min-width: 668px) { #cw-widget-holder.ac-cw-leave { top: auto !important; bottom: 20px !important; } }
@media only screen and (max-width: 667px) { #cw-widget-holder.ac-cw-leave { top: 0 !important; bottom: auto !important; } }
/* At exactly 667 px both of the SDK's phone and desktop rules apply, which leaves its window desktop sized
   but stuck to the top. Keep it full screen like every other phone width (not the small unread pop up). */
/* #793: the desktop window a bit bigger than the SDK's 400 x up to 640 (its height rule, 90% minus 84 px, stays). */
@media only screen and (min-width: 668px) {
    #cw-widget-holder:not(.has-unread-view) { width: 440px !important; max-height: 720px !important; }
}
@media only screen and (max-width: 667px) {
    #cw-widget-holder:not(.has-unread-view) { left: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; }
}
@media print { .ac-chat-launcher, .ac-chat-shell, .ac-chat-field { display: none; } }
