.mpc-content .mpc-paragraph{
    position:relative;
    padding-right:28px;
}

.mpc-open{
    position:absolute;
    right:0;
    top:.1em;

    display:inline-flex;
    align-items:center;
    gap:2px;

    padding:0;
    margin:0;

    border:0;
    background:none;

    cursor:pointer;

    font-size:13px;
    line-height:1;

    color:inherit;
}

.mpc-open:hover{
    opacity:.75;
    background:none;
}

.mpc-count{
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.mpc-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.2);
    opacity:0;
    z-index:9997;
    transition:opacity .18s ease;
}

.mpc-drawer-overlay.is-open{
    opacity:1;
}

.mpc-drawer{
    position:fixed;
    top:0;
    right:0;

    width:min(560px,96vw);
    height:100vh;

    background:#fff;

    z-index:9998;

    box-shadow:-8px 0 30px rgba(0,0,0,.18);

    transform:translateX(100%);
    transition:transform .18s ease;
}

.mpc-drawer.is-open{
    transform:translateX(0);
}

.mpc-drawer-inner{
    height:100%;
    display:flex;
    flex-direction:column;
}

.mpc-drawer-head{
    position:relative;

    padding:15px 28px 22px;

    border-bottom:1px solid #eee;
}

.mpc-close{
    position:absolute;

    top:10px;
    right:12px;

    border:0;
    background:none;

    font-size:32px;

    cursor:pointer;

    line-height:1;
}

.mpc-drawer-title{
    line-height:1.75;
    font-weight:700;

    max-height:180px;
    overflow:auto;
}

.mpc-reactions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    padding:16px 28px;

    border-bottom:1px solid #eee;
}

.mpc-emoji{
    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid #ddd;
    border-radius:999px;

    background:#fafafa;

    padding:7px 12px;

    cursor:pointer;
}

.mpc-emoji.is-selected{
    background:#eef5ff;
    border-color:#93c5fd;
}

.mpc-list{
    flex:1;

    overflow:auto;

    padding:20px 28px;
}

.mpc-item{
    padding:16px 0;

    border-bottom:1px solid #eee;
}

.mpc-item b{
    display:block;
}

.mpc-item span{
    display:block;

    margin:4px 0 8px;

    font-size:12px;
    opacity:.65;
}

.mpc-item p{
    margin:0;

    line-height:1.75;
    white-space:pre-wrap;
}

.mpc-empty{
    opacity:.7;
}

.mpc-form{
    display:grid;
    gap:10px;

    padding:18px 28px 24px;

    border-top:1px solid #eee;

    background:#fff;
}
.mpc-pending{
    opacity:.55;
}
.mpc-form input,
.mpc-form textarea{
    width:100%;

    box-sizing:border-box;

    border:1px solid #ddd;
    border-radius:8px;

    padding:11px 12px;
}

.mpc-form textarea{
    min-height:90px;
    resize:vertical;
    line-height:1.6;
}

.mpc-form button[type=submit]{
    justify-self:end;

    border:0;
    border-radius:8px;

    background:#222;
    color:#fff;

    padding:9px 18px;

    cursor:pointer;
}

.mpc-saved-user{
    padding:10px 12px;

    border-radius:8px;

    background:#f7f7f7;

    font-size:13px;
}

@media (max-width: 600px){

    .mpc-content .mpc-paragraph{
        padding-right:22px;
    }

    .mpc-open{
        right:0;
        top:.15em;
        font-size:12px;
    }

    .mpc-drawer{
        width:100vw;
        max-width:100vw;
        height:100dvh;
        box-sizing:border-box;
    }

    .mpc-drawer-head{
        padding:48px 16px 18px;
    }

    .mpc-drawer-title{
        max-height:130px;
        line-height:1.65;
        font-size:15px;
        word-break:break-word;
    }

    .mpc-close{
        top:10px;
        right:12px;
    }

    .mpc-reactions{
        padding:12px 16px;
        gap:8px;
    }

    .mpc-emoji{
        padding:6px 9px;
        font-size:13px;
    }

    .mpc-list{
        padding:14px 16px;
    }

    .mpc-item{
        padding:12px 0;
    }

    .mpc-form{
        padding:14px 16px 18px;
        gap:8px;
    }

    .mpc-form input,
    .mpc-form textarea{
        max-width:100%;
        font-size:16px;
        padding:10px 11px;
    }

    .mpc-form textarea{
        min-height:76px;
    }

    .mpc-form button[type=submit]{
        width:100%;
        justify-self:stretch;
        padding:11px 16px;
    }
}