/*
 * A page's "message us" button and panel (views/l/partials/inbox_widget.php, js/inbox-widget.js).
 *
 * The colours are the page's own: the script reads its first link button and sets --ib-accent
 * (that button's colour), --ib-on-accent (its text), --ib-edge, --ib-radius and --ib-font. The values
 * below are only what a page with no link buttons gets: the default itsbio look.
 *
 * z-index 1045: above the page's own carousel arrows (1040), below every modal (1050 and up).
 *
 * Corners carry !important: the public pages' custom.css squares off every button, input and
 * textarea with `border-radius: 0 !important`, which drew this as a set of hard boxes.
 */
.itsbio-inbox {
    --ib-accent: #14130f;
    --ib-on-accent: #ffffff;
    --ib-edge: #14130f;
    --ib-radius: 20px;
    --ib-font: inherit;
    --ib-gap: 20px;
    --ib-lift: 0px;
    /* In the page's flow it is an empty strip, so the button never covers the last thing on it. */
    height: 84px;
    font-family: var(--ib-font);
}
.itsbio-inbox[hidden] { display: none; }
.itsbio-inbox.is-raised { --ib-lift: 76px; height: 160px; }
.itsbio-inbox *, .itsbio-inbox *::before, .itsbio-inbox *::after { box-sizing: border-box; }

/* ---- The button ---- */
.itsbio-inbox .ib-launcher {
    position: fixed;
    bottom: calc(var(--ib-gap) + var(--ib-lift));
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100vw - 2 * var(--ib-gap));
    padding: 13px 20px 13px 16px;
    border: 2px solid var(--ib-edge);
    border-radius: 999px !important;
    background: var(--ib-accent);
    color: var(--ib-on-accent);
    font: 600 15px/1.2 var(--ib-font);
    cursor: pointer;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.itsbio-inbox .ib-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .12); }
.itsbio-inbox .ib-launcher:focus-visible { outline: 3px solid var(--ib-accent); outline-offset: 3px; }
.itsbio-inbox .ib-launcher svg { width: 22px; height: 22px; flex: none; }
.itsbio-inbox .ib-launcher-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itsbio-inbox .ib-badge {
    position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: #ff3b52; color: #fff; border: 2px solid #fff;
    font: 700 12px/18px var(--ib-font); text-align: center;
}
.itsbio-inbox .ib-badge[hidden] { display: none; }

.itsbio-inbox.is-right .ib-launcher { right: var(--ib-gap); }
.itsbio-inbox.is-left .ib-launcher { left: var(--ib-gap); }
.itsbio-inbox.is-center .ib-launcher { left: 50%; transform: translateX(-50%); }
.itsbio-inbox.is-center .ib-launcher:hover { transform: translate(-50%, -2px); }

/* ---- The panel ---- */
.itsbio-inbox .ib-panel {
    position: fixed;
    bottom: calc(var(--ib-gap) + var(--ib-lift) + 66px);
    z-index: 1045;
    width: 370px;
    max-width: calc(100vw - 2 * var(--ib-gap));
    height: min(560px, calc(100vh - 130px - var(--ib-lift)));
    height: min(560px, calc(100dvh - 130px - var(--ib-lift)));
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #14130f;
    border: 2px solid var(--ib-edge);
    border-radius: min(var(--ib-radius), 24px);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
    overflow: hidden;
    /* A swipe that reaches the end of the conversation stops here, not on the page behind. */
    overscroll-behavior: contain;
    text-align: left;
    animation: ib-rise .18s ease-out;
}
.itsbio-inbox .ib-panel[hidden] { display: none; }
.itsbio-inbox.is-right .ib-panel { right: var(--ib-gap); }
.itsbio-inbox.is-left .ib-panel { left: var(--ib-gap); }
.itsbio-inbox.is-center .ib-panel { left: 50%; transform: translateX(-50%); animation-name: ib-rise-center; }

@keyframes ib-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ib-rise-center { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .itsbio-inbox .ib-panel { animation: none; }
    .itsbio-inbox .ib-launcher { transition: none; }
}

.itsbio-inbox .ib-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 14px 14px 18px;
    background: var(--ib-accent); color: var(--ib-on-accent);
}
.itsbio-inbox .ib-panel-title strong { display: block; font: 700 16px/1.25 var(--ib-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itsbio-inbox .ib-panel-status { display: block; font: 400 12.5px/1.3 var(--ib-font); opacity: .82; margin-top: 2px; }
.itsbio-inbox .ib-panel-status[hidden] { display: none; }
.itsbio-inbox .ib-panel-title { min-width: 0; }
.itsbio-inbox .ib-close {
    flex: none; width: 34px; height: 34px; border-radius: 50% !important; border: 0; padding: 0;
    background: rgba(127, 127, 127, .18); color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.itsbio-inbox .ib-close:hover { background: rgba(127, 127, 127, .3); }
.itsbio-inbox .ib-close svg { width: 18px; height: 18px; }

.itsbio-inbox .ib-log {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
    background: #f5f5f3;
}
.itsbio-inbox .ib-msg { max-width: 84%; display: flex; flex-direction: column; }
.itsbio-inbox .ib-msg-text {
    padding: 9px 13px; border-radius: 16px; font: 400 14.5px/1.45 var(--ib-font);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.itsbio-inbox .ib-msg-meta { font: 400 11px/1.3 var(--ib-font); color: #8a877f; margin-top: 3px; padding: 0 4px; }
.itsbio-inbox .from-page { align-self: flex-start; }
.itsbio-inbox .from-page .ib-msg-text { background: #ffffff; color: #14130f; border: 1px solid rgba(20, 19, 15, .1); border-bottom-left-radius: 5px; }
.itsbio-inbox .from-me { align-self: flex-end; align-items: flex-end; }
.itsbio-inbox .from-me .ib-msg-text { background: var(--ib-accent); color: var(--ib-on-accent); border-bottom-right-radius: 5px; }

/* A product the page sent. */
.itsbio-inbox .ib-product {
    display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px;
    background: #ffffff; color: #14130f !important; text-decoration: none !important;
    border: 1.5px solid var(--ib-edge); border-radius: 14px; max-width: 260px;
}
.itsbio-inbox .ib-product img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; flex: none; }
.itsbio-inbox .ib-product span { display: flex; flex-direction: column; min-width: 0; }
.itsbio-inbox .ib-product strong { font: 600 13.5px/1.3 var(--ib-font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.itsbio-inbox .ib-product small { font: 600 12px/1.3 var(--ib-font); color: #2b2bf5; }
.itsbio-inbox.is-dark .ib-product { background: #2b2b31; color: #f1f1f3 !important; border-color: rgba(255, 255, 255, .16); }
.itsbio-inbox.is-dark .ib-product small { color: #9fb4ff; }

/* ---- Writing ---- */
.itsbio-inbox .ib-form { padding: 10px 12px 12px; border-top: 1px solid rgba(20, 19, 15, .1); background: #ffffff; }
.itsbio-inbox .ib-who { display: grid; gap: 8px; margin-bottom: 8px; }
.itsbio-inbox .ib-who[hidden] { display: none; }
.itsbio-inbox .ib-form input, .itsbio-inbox .ib-form textarea {
    width: 100%; border: 1.5px solid rgba(20, 19, 15, .18); border-radius: 12px !important;
    padding: 10px 12px; font: 400 15px/1.35 var(--ib-font); color: #14130f; background: #ffffff;
    margin: 0;
}
.itsbio-inbox .ib-form input:focus, .itsbio-inbox .ib-form textarea:focus { outline: none; border-color: var(--ib-edge); box-shadow: 0 0 0 3px rgba(20, 19, 15, .08); }
.itsbio-inbox .ib-compose { display: flex; gap: 8px; align-items: flex-end; }
.itsbio-inbox .ib-compose textarea { resize: none; min-height: 44px; max-height: 120px; overscroll-behavior: contain; }
.itsbio-inbox .ib-send {
    flex: none; width: 44px; height: 44px; border-radius: 50% !important; padding: 0;
    border: 2px solid var(--ib-edge); background: var(--ib-accent); color: var(--ib-on-accent);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.itsbio-inbox .ib-send:disabled { opacity: .5; cursor: default; }
.itsbio-inbox .ib-send svg { width: 19px; height: 19px; }
.itsbio-inbox .ib-error { margin: 8px 2px 0; font: 500 13px/1.35 var(--ib-font); color: #c8102e; }
.itsbio-inbox .ib-error[hidden] { display: none; }
.itsbio-inbox .ib-trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---- A dark design gets a dark panel (the script sets .is-dark from the page's text colour) ---- */
.itsbio-inbox.is-dark .ib-panel { background: #17171b; color: #f1f1f3; }
.itsbio-inbox.is-dark .ib-log { background: #1f1f24; }
.itsbio-inbox.is-dark .from-page .ib-msg-text { background: #2b2b31; color: #f1f1f3; border-color: rgba(255, 255, 255, .08); }
.itsbio-inbox.is-dark .ib-msg-meta { color: #9a99a3; }
.itsbio-inbox.is-dark .ib-form { background: #17171b; border-top-color: rgba(255, 255, 255, .08); }
.itsbio-inbox.is-dark .ib-form input, .itsbio-inbox.is-dark .ib-form textarea { background: #222228; color: #f1f1f3; border-color: rgba(255, 255, 255, .16); }
.itsbio-inbox.is-dark .ib-form input::placeholder, .itsbio-inbox.is-dark .ib-form textarea::placeholder { color: #8d8c96; }
.itsbio-inbox.is-dark .ib-error { color: #ff8a98; }

/* ---- Phones: the panel becomes a sheet across the bottom ---- */
@media (max-width: 480px) {
    .itsbio-inbox { --ib-gap: 14px; }
    .itsbio-inbox .ib-panel,
    .itsbio-inbox.is-center .ib-panel {
        left: 8px; right: 8px; width: auto; max-width: none; transform: none;
        bottom: calc(var(--ib-gap) + var(--ib-lift) + 62px);
        height: min(560px, calc(100vh - 110px - var(--ib-lift)));
        height: min(560px, calc(100dvh - 110px - var(--ib-lift)));
        animation-name: ib-rise;
    }
    /* Under 16px, phones zoom the whole page in when the box is tapped. */
    .itsbio-inbox .ib-form input, .itsbio-inbox .ib-form textarea { font-size: 16px; }
}