.beta-kiwi{
    position:fixed;
    right:18px;
    bottom:84px;
    z-index:1200;
    padding-left:72px;
    padding-top:36px;
}

.beta-kiwi__mascot-popout{
    position:absolute;
    left:30px;
    bottom:2px;
    z-index:3;
    width:92px;
    height:92px;
    object-fit:cover;
    border-radius:50%;
    filter:drop-shadow(0 8px 10px rgb(0 0 0 / 24%));
    pointer-events:none;
    transform:rotate(-2deg);
    transition:transform .16s ease;
}

.beta-kiwi:hover .beta-kiwi__mascot-popout,
.beta-kiwi:focus-within .beta-kiwi__mascot-popout{
    transform:translateY(-3px) rotate(1deg) scale(1.04);
}

.beta-kiwi__hint{
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    width:min(310px,calc(100vw - 28px));
    padding:11px 13px;
    border:1px solid #d9c9a6;
    border-radius:12px;
    background:#fffaf0;
    color:#2d3d35;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    font-size:.82rem;
    line-height:1.35;
    opacity:0;
    visibility:hidden;
    transform:translateY(5px);
    transition:opacity .14s ease,transform .14s ease,visibility .14s;
    pointer-events:none;
}

.beta-kiwi__hint::after{
    content:"";
    position:absolute;
    right:27px;
    top:100%;
    border:7px solid transparent;
    border-top-color:#fffaf0;
}

.beta-kiwi__hint strong,
.beta-kiwi__hint span{
    display:block;
}

.beta-kiwi__hint strong{
    margin-bottom:3px;
    color:#5b2b08;
}

.beta-kiwi:hover .beta-kiwi__hint,
.beta-kiwi:focus-within .beta-kiwi__hint{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.beta-kiwi__trigger{
    position:relative;
    z-index:2;
    border:0;
    border-radius:999px;
    padding:12px 18px 12px 24px;
    display:flex;
    gap:8px;
    align-items:center;
    min-height:48px;
    font-weight:900;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    background:#0b6f53;
    color:#fff;
    cursor:pointer;
}

.beta-kiwi__trigger-icon{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    color:#f4c542;
    font-size:1.4rem;
    font-weight:900;
}

.beta-kiwi__dialog{
    width:min(620px,calc(100vw - 28px));
    border:0;
    border-radius:18px;
    padding:0;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.beta-kiwi__dialog::backdrop{
    background:rgba(12,28,22,.62);
}

.beta-kiwi__form{
    padding:24px;
    display:grid;
    gap:15px;
}

.beta-kiwi__heading{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.beta-kiwi__heading h2{
    margin:.15rem 0;
}

.beta-kiwi__close{
    border:0;
    background:transparent;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
}

.beta-kiwi label{
    display:grid;
    gap:6px;
    font-weight:700;
}

.beta-kiwi input,
.beta-kiwi select,
.beta-kiwi textarea{
    width:100%;
    font:inherit;
    padding:10px 12px;
    border:1px solid #b8c5be;
    border-radius:8px;
}

.beta-kiwi small,
.beta-kiwi__privacy{
    font-weight:400;
    color:#52635b;
}

.beta-kiwi__privacy{
    padding:10px 12px;
    background:#f5f0df;
    border-radius:8px;
}

.beta-status{
    font-weight:800;
}

.beta-report-text{
    padding:14px;
    background:#f7f8f7;
    border-radius:8px;
    margin:12px 0;
}

.beta-attachments{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.beta-history-note{
    margin:.45rem 0 0;
    padding:.6rem .7rem;
    border-left:3px solid #d39a24;
    border-radius:.35rem;
    background:#fff8e9;
    color:#493829;
    line-height:1.4;
}

.beta-history-note strong{
    color:#6b3a14;
}

@media(max-width:640px){
    .beta-kiwi{
        right:10px;
        bottom:72px;
        padding-left:58px;
        padding-top:28px;
    }

    .beta-kiwi__mascot-popout{
        left:25px;
        width:76px;
        height:76px;
    }

    .beta-kiwi__trigger{
        padding:10px 14px 10px 20px;
        min-height:44px;
    }

    .beta-kiwi__form{
        padding:18px;
    }
}