/* ==========================================================================
   THEOCHEM QUERY WIDGET
   Same visual language as the feedback widget (feedback.css), pinned to
   the top-right of the viewport instead of the bottom-right, and linking
   out to an external Google Form instead of posting inline.
   ========================================================================== */

.query-widget{

    position:fixed;

    right:24px;

    top:84px;

    z-index:9998;

    font-family:inherit;

}


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

.query-widget__toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:var(--brand-accent);

    color:#fff;

    cursor:pointer;

    font-size:1.15rem;

    font-weight:700;

    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;

}

.query-widget__toggle:hover{

    transform:translateY(-2px);

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

}

.query-widget__toggle:active{

    transform:translateY(0);

}

.query-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);

}


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

.query-widget__panel{

    position:absolute;

    right:0;

    top:56px;

    width:320px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

    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);

}

.query-widget__panel.is-open{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    animation:query-popup .22s ease;

}

@keyframes query-popup{

    from{
        opacity:0;
        transform:translateY(-10px) scale(.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.query-widget__body{

    padding:1.15rem 1.25rem 1.25rem;

}

.query-widget__title{

    margin:0 0 .5rem;

    font-size:1rem;

    font-weight:700;

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

}

.query-widget__hint{

    margin:0 0 1rem;

    font-size:.82rem;

    line-height:1.55;

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

}

.query-widget__note{

    margin:.85rem 0 0;

    font-size:.74rem;

    line-height:1.5;

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

}

.query-widget__note a{

    color:var(--brand-accent);

}


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

#query-form{

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

#query-email,
#query-question{

    width:100%;

    padding:.7rem .85rem;

    font:inherit;

    font-size:.85rem;

    line-height:1.5;

    border-radius:10px;

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

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

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

    box-sizing:border-box;

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

}

#query-question{

    min-height:90px;

    max-height:220px;

    resize:vertical;

}

#query-email::placeholder,
#query-question::placeholder{

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

}

#query-email:focus,
#query-question:focus{

    outline:none;

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

    box-shadow:0 0 0 3px rgba(91,140,255,.20);

}

[data-md-color-scheme="slate"] #query-email,
[data-md-color-scheme="slate"] #query-question{

    background:#1f232b;

}

[data-md-color-scheme="default"] #query-email,
[data-md-color-scheme="default"] #query-question{

    background:#fafafa;

}


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

#query-form button[type="submit"]{

    padding:.62rem 1rem;

    border:none;

    border-radius:8px;

    background:var(--brand-accent);

    color:#fff;

    font-size:.85rem;

    font-weight:600;

    cursor:pointer;

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

}

#query-form button[type="submit"]:hover{

    transform:translateY(-1px);

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

}

#query-form button[type="submit"]:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

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

    position:relative;

    color:transparent;

}

#query-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:query-spin .7s linear infinite;

}

@keyframes query-spin{

    to{
        transform:rotate(360deg);
    }

}


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

.query-widget__success{

    display:none;

    margin-top:.2rem;

    padding:.65rem .8rem;

    border-radius:10px;

    font-size:.8rem;

    line-height:1.5;

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

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

    color:#4ade80;

}

.query-widget__success.show{

    display:block;

}


/* ==========================================================================
   GLASS EFFECT (matches feedback widget, scoped per color scheme)
   ========================================================================== */

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

.query-widget__panel{

    backdrop-filter:blur(18px);

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

}

}

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

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

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

}

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

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

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

}


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

@media (max-width:700px){

.query-widget{

    right:16px;

    top:72px;

}

.query-widget__panel{

    width:min(88vw,320px);

}

}


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

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

.query-widget *{

    animation:none !important;

    transition:none !important;

}

}


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

@media print{

.query-widget{

    display:none !important;

}

}