/* ==========================================================================
   THEOCHEM FEEDBACK WIDGET
   ========================================================================== */

.feedback-widget{

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:9999;

    font-family:inherit;

}


/* ==========================================================================
   TOGGLE BUTTON
   ========================================================================== */

.feedback-widget__toggle{

    display:flex;

    align-items:center;

    gap:.65rem;

    padding:.82rem 1.25rem;

    border:none;

    border-radius:999px;

    background:var(--brand-accent);

    color:#fff;

    cursor:pointer;

    font-size:.88rem;

    font-weight:600;

    letter-spacing:.01em;

    box-shadow:
        0 8px 20px rgba(0,0,0,.20),
        0 2px 6px rgba(0,0,0,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;

}

.feedback-widget__toggle:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 32px rgba(0,0,0,.28),
        0 4px 10px rgba(0,0,0,.18);

}

.feedback-widget__toggle:active{

    transform:translateY(-1px);

}

.feedback-widget__toggle:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(91,140,255,.35),
        0 10px 30px rgba(0,0,0,.25);

}


/* ==========================================================================
   MATERIAL ICON
   ========================================================================== */

.feedback-widget__icon{

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.feedback-widget__icon svg{

    width:20px;

    height:20px;

    fill:currentColor;

}


/* ==========================================================================
   PANEL
   ========================================================================== */

.feedback-widget__panel{

    position:absolute;

    right:0;

    bottom:72px;

    width:360px;

    opacity:0;

    visibility:hidden;

    transform:translateY(14px);

    transition:

        opacity .22s ease,

        transform .22s ease,

        visibility .22s;

    border-radius:16px;

    overflow:hidden;

    background:var(--md-default-bg-color);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 20px 50px rgba(0,0,0,.35),

        0 6px 16px rgba(0,0,0,.18);

}

.feedback-widget__panel.is-open{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* ==========================================================================
   HEADER
   ========================================================================== */

.feedback-widget__header{

    padding:1.15rem 1.25rem .75rem;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.feedback-widget__title{

    margin:0.25rem 3.65rem 0;

    font-size:1rem;

    font-weight:700;

    color:var(--md-default-fg-color);

}

.feedback-widget__hint{

    margin:0.45rem 0.65rem 0;

    font-size:.79rem;

    line-height:1.55;

    color:var(--md-default-fg-color--light);

}


/* ==========================================================================
   FORM
   ========================================================================== */

.feedback-form{

    padding:1.1rem 1.25rem 1.25rem;

}

.feedback-form textarea{

    width:100%;

    min-height:140px;

    max-height:320px;

    resize:vertical;

    padding:.9rem;

    font:inherit;

    font-size:.88rem;

    line-height:1.55;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.12);

    background:var(--md-code-bg-color);

    color:var(--md-default-fg-color);

    transition:

        border-color .18s,

        box-shadow .18s,

        background-color .18s;

    box-sizing:border-box;

}

.feedback-form textarea::placeholder{

    color:var(--md-default-fg-color--light);

}

.feedback-form textarea:focus{

    outline:none;

    border-color:var(--brand-accent);

    box-shadow:

        0 0 0 3px rgba(91,140,255,.20);

}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.feedback-widget__meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:.9rem;

}

#feedback-char-count{

    font-size:.74rem;

    color:var(--md-default-fg-color--light);

    user-select:none;

}

#feedback-char-count.limit{

    color:#ef4444;

    font-weight:600;

}


/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */

.feedback-form button[type="submit"]{

    padding:.58rem 1.15rem;

    border:none;

    border-radius:8px;

    background:var(--brand-accent);

    color:#fff;

    font-size:.83rem;

    font-weight:600;

    cursor:pointer;

    transition:

        background-color .18s,

        transform .18s,

        box-shadow .18s;

}

.feedback-form button[type="submit"]:hover{

    transform:translateY(-1px);

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

}

.feedback-form button[type="submit"]:active{

    transform:translateY(0);

}

.feedback-form button[type="submit"]:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/* ==========================================================================
   SUCCESS / ERROR MESSAGE
   ========================================================================== */

.feedback-widget__success{

    display:none;

    margin-top:1rem;

    padding:.75rem .9rem;

    border-radius:10px;

    font-size:.82rem;

    line-height:1.5;

    background:rgba(22,163,74,.10);

    border:1px solid rgba(22,163,74,.25);

    color:#4ade80;

}

.feedback-widget__success.show{

    display:block;

}

.feedback-widget__error{

    display:none;

    margin-top:1rem;

    padding:.75rem .9rem;

    border-radius:10px;

    font-size:.82rem;

    line-height:1.5;

    background:rgba(239,68,68,.10);

    border:1px solid rgba(239,68,68,.25);

    color:#f87171;

}

.feedback-widget__error.show{

    display:block;

}


/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.feedback-form.is-loading{

    pointer-events:none;

    opacity:.7;

}

.feedback-form button[type="submit"].loading{

    position:relative;

    color:transparent;

}

.feedback-form button[type="submit"].loading::after{

    content:"";

    position:absolute;

    width:16px;

    height:16px;

    top:50%;

    left:50%;

    margin-top:-8px;

    margin-left:-8px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:feedback-spin .7s linear infinite;

}

@keyframes feedback-spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

.feedback-form textarea::-webkit-scrollbar{

    width:8px;

}

.feedback-form textarea::-webkit-scrollbar-track{

    background:transparent;

}

.feedback-form textarea::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.15);

    border-radius:20px;

}

.feedback-form textarea::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.28);

}


/* ==========================================================================
   GLASS EFFECT
   ========================================================================== */

@supports(backdrop-filter:blur(14px)){

.feedback-widget__panel{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    background:rgba(32,34,40,.88);

}

}


/* ==========================================================================
   OPEN ANIMATION
   ========================================================================== */

.feedback-widget__panel.is-open{

    animation:feedback-popup .22s ease;

}

@keyframes feedback-popup{

    from{

        opacity:0;

        transform:translateY(14px) scale(.97);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:700px){

.feedback-widget{

    right:16px;

    bottom:16px;

}

.feedback-widget__toggle{

    padding:.72rem 1rem;

    font-size:.84rem;

}

.feedback-widget__panel{

    width:min(92vw,360px);

    right:0;

    bottom:64px;

}

.feedback-form{

    padding:1rem;

}

.feedback-form textarea{

    min-height:120px;

}

}


/* ==========================================================================
   VERY SMALL DEVICES
   ========================================================================== */

@media (max-width:420px){

.feedback-widget{

    right:12px;

    bottom:12px;

}

.feedback-widget__toggle{

    width:54px;

    height:54px;

    padding:0;

    justify-content:center;

    border-radius:50%;

}

.feedback-widget__toggle span:last-child{

    display:none;

}

.feedback-widget__icon{

    margin:0;

}

.feedback-widget__panel{

    width:calc(100vw - 24px);

    right:-2px;

}

}


/* ==========================================================================
   DARK MODE IMPROVEMENTS
   ========================================================================== */

[data-md-color-scheme="slate"] .feedback-widget__panel{

    border-color:rgba(255,255,255,.08);

}

[data-md-color-scheme="slate"] .feedback-form textarea{

    background:#1f232b;

}

[data-md-color-scheme="default"] .feedback-widget__panel{

    border-color:rgba(0,0,0,.08);

}

[data-md-color-scheme="default"] .feedback-form textarea{

    background:#fafafa;

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

.feedback-widget *{

    animation:none !important;

    transition:none !important;

}

}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

.feedback-widget{

    display:none !important;

}

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.feedback-widget button:focus-visible,

.feedback-widget textarea:focus-visible{

    outline:none;

}

.feedback-widget__toggle:focus-visible{

    box-shadow:

        0 0 0 3px rgba(91,140,255,.35),

        0 8px 24px rgba(0,0,0,.30);

}

.feedback-form button[type="submit"]:focus-visible{

    box-shadow:

        0 0 0 3px rgba(91,140,255,.30);

}


/* ==========================================================================
   HOVER EFFECTS
   ========================================================================== */

.feedback-widget__panel:hover{

    box-shadow:

        0 26px 60px rgba(0,0,0,.42),

        0 8px 18px rgba(0,0,0,.18);

}


/* ==========================================================================
   Z-INDEX SAFETY
   ========================================================================== */

.feedback-widget{

    isolation:isolate;

}


/* ==========================================================================
   END
   ========================================================================== */