/* TempMail Feedback widget (in-house, PushFeedback-style) — v3.
   Temp Mail PW scheme: primary #1a73e8, orange accent #ff9c37, dark #141414.
   Tiny file (~4 KB), no fonts, no libraries. Loaded on every page via the
   layout; the bug button sits ABOVE the .go-up back-to-top arrow, whose live
   rules are: desktop 55x55 @ bottom:50px right:50px, mobile 40x40 @
   bottom:50px right:16px (style.css). So the bug button is 12px above it.
   v2: bug button smaller (desktop 46px, mobile 34px).
   v3: fixed the v2 header comment (it closed early and the leftover lines
   swallowed the .tn-fb-btn rule, hiding the button). */

/* Floating bug button — above the back-to-top arrow */
.tn-fb-btn {
    position: fixed !important;
    right: 50px !important;
    bottom: 117px !important; /* 50px + 55px go-up height + 12px gap */
    z-index: 2000001 !important;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #989898;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(26, 115, 232, .45);
    transition: background .2s, transform .2s;
    padding: 0;
    line-height: 1;
}
.tn-fb-btn:hover { background: #ff9c37; transform: translateY(-2px); color: #fff; }
.tn-fb-btn:focus-visible { outline: 3px solid #ff9c37; outline-offset: 2px; }
/* Hidden while a live screenshot is being captured */
.tn-fb-btn.tn-fb-capturing { visibility: hidden; }

/* Overlay + modal */
.tn-fb-overlay {
    position: fixed !important;
    inset: 0;
    background: rgba(20, 20, 20, .55);
    z-index: 2000002 !important;
    display: none;
}
.tn-fb-modal {
    position: fixed !important;
    z-index: 2000003 !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 480px);
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    display: none;
    font-family: 'Mulish', sans-serif;
}
.tn-fb-overlay.tn-fb-show, .tn-fb-modal.tn-fb-show { display: block; }
.tn-fb-modal.tn-fb-capturing { visibility: hidden; }

.tn-fb-head {
    background: #1a73e8;
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px 16px 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tn-fb-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.tn-fb-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.tn-fb-close:hover { opacity: .8; }
.tn-fb-body { padding: 20px; }
.tn-fb-body label.tn-fb-label { font-weight: 700; font-size: 14px; color: #212121; margin-bottom: 6px; display: block; }
.tn-fb-body .form-control { margin-bottom: 14px; }
.tn-fb-body .form-control:focus { border-color: #1a73e8; }

/* 6 stars — gold when lit */
.tn-fb-stars { display: flex; gap: 4px; margin: 2px 0 4px; }
.tn-fb-stars button {
    background: transparent;
    border: 0;
    padding: 2px;
    font-size: 30px;
    line-height: 1;
    color: #d7dce3;
    cursor: pointer;
    transition: color .15s, transform .15s;
}
.tn-fb-stars button:hover { transform: scale(1.15); }
.tn-fb-stars button.tn-fb-on { color: #ffb400; }
.tn-fb-stars button:focus-visible { outline: 2px solid #1a73e8; border-radius: 4px; }
.tn-fb-rating-text { font-size: 13px; color: #666; margin-bottom: 14px; min-height: 18px; }

/* Screenshot area */
.tn-fb-shot-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tn-fb-shot-btn {
    background: #d5e5ff;
    color: #1a73e8;
    border: 1px solid #bcd4ff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.tn-fb-shot-btn:hover { background: #1a73e8; color: #fff; }
.tn-fb-shot-btn:disabled { opacity: .6; cursor: wait; }
.tn-fb-shot-preview { display: none; align-items: center; gap: 10px; margin-bottom: 14px; }
.tn-fb-shot-preview.tn-fb-show { display: flex; }
.tn-fb-shot-preview img { max-width: 120px; max-height: 90px; border-radius: 8px; border: 1px solid #e3e7ed; display: block; }
.tn-fb-shot-remove { background: transparent; border: 0; color: #d33; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px; }
.tn-fb-shot-status { font-size: 13px; color: #666; margin-bottom: 14px; }
.tn-fb-shot-status:empty { display: none; }

.tn-fb-submit { width: 100%; background: #1a73e8; border-color: #1a73e8; font-weight: 700; }
.tn-fb-submit:hover { background: #ff9c37; border-color: #ff9c37; }
.tn-fb-success {
    display: none;
    background: #e6f4ea;
    color: #137333;
    border-radius: 10px;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
}
.tn-fb-success.tn-fb-show { display: block; }
.tn-fb-error {
    display: none;
    background: #fce8e6;
    color: #a50e0e;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
}
.tn-fb-error.tn-fb-show { display: block; }
.tn-fb-note { font-size: 12px; color: #888; text-align: center; margin: 12px 0 0; }

@media (max-width: 767.98px) {
    /* Match .go-up mobile: 40x40 @ bottom:50px right:16px */
    .tn-fb-btn {
        right: 16px !important;
        bottom: 102px !important; /* 50px + 40px go-up height + 12px gap */
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .tn-fb-stars button { font-size: 27px; }
}