/* General text styling */
#ubq-quiz {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-family: Inter, -apple-system, sans-serif !important;
    font-size: .95em !important;
    font-weight: 400 !important;
    line-height: 1.8em !important;
    width: 100% !important;
    letter-spacing: .005em !important;
    gap: 10px !important;
    padding: 30px !important;
    position: relative !important;
}

#ubq-quiz p {
    margin-bottom: 0px !important;
    font-size: .95em !important;
}

/* Stats tab — bookmark-style tab pinned to top-right corner */
#user-ubq-stats {
    position: absolute !important;
    top: 0px !important;
    right: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: white !important;
    border-radius: 0 0 20px 20px !important;
    border: solid #e8e8e8 !important;
    border-width: 0 1px 1px 1px !important;
    box-shadow: none !important;
    font-family: Poppins, sans-serif !important;
    letter-spacing: 0.015em !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    z-index: 2 !important;
    line-height: normal !important;
}

#user-ubq-stats #stats-icon {
    display: flex !important;
    align-items: center !important;
    color: #888 !important;
}

#user-ubq-stats #stats-icon svg {
    width: 14px !important;
    height: 14px !important;
}

#user-ubq-stats .stats-divider {
    width: 1px !important;
    height: 14px !important;
    background: #ddd !important;
    flex-shrink: 0 !important;
}

#user-ubq-stats p {
    display: inline !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: .72em !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

#question-content, #main-question {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}

#main-question {
    margin: 20px 0px !important
}

#question-content form {
    width: 100%;
    margin-bottom: 30px;
}

#question-content p {
    margin-bottom: 0px !important;
}

#main-question img, .frq-card-body img {
    display: flex;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    object-fit: contain;
}

#question-content label img {
    display: flex;
    flex-direction: column;
    line-height: normal;
    margin-right: 10px;
    object-fit: contain;
}

#question-content label {
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
    padding: 5px;
    margin-left: 1em;
    align-items: center;
    width: auto;
}

#question-content input[type="radio"], #question-content input[type="checkbox"] {
    margin-right: 10px;
}

/* FRQ Accordion — uses box-shadow instead of border for depth consistency */
#ubq-quiz .frq-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
}

#ubq-quiz .frq-card {
    border: none !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    transition: box-shadow 0.15s, border-radius 0.25s !important;
}

#ubq-quiz .frq-card-open {
    border-radius: 40px !important;
}

#ubq-quiz .frq-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 22px 30px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: Inter, -apple-system, sans-serif !important;
    color: #1a1a1a !important;
    line-height: normal !important;
    text-align: left !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s !important;
}

#ubq-quiz .frq-card-header:hover {
    background: #fafafa !important;
}

#ubq-quiz .frq-card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#ubq-quiz .frq-card-label {
    font-weight: 600 !important;
    font-size: 1.05em !important;
    color: #1a1a1a !important;
    letter-spacing: -.01em !important;
}

#ubq-quiz .frq-card-points {
    font-size: .82em !important;
    background: #ebebeb !important;
    color: #555 !important;
    padding: 4px 14px !important;
    border-radius: 100px !important;
    font-weight: 500 !important;
    border: none !important;
    line-height: normal !important;
}

#ubq-quiz .frq-card-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #f0f0f0 !important;
    flex-shrink: 0 !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

#ubq-quiz .frq-card-header:hover .frq-card-toggle {
    background: #e5e5e5 !important;
}

#ubq-quiz .frq-card-toggle svg {
    width: 14px !important;
    height: 14px !important;
    color: #888 !important;
    transition: color 0.15s !important;
}

#ubq-quiz .frq-card-open .frq-card-toggle {
    background: #555 !important;
}

#ubq-quiz .frq-card-open .frq-card-toggle svg {
    color: white !important;
}

/* Collapsed state */
#ubq-quiz .frq-card-body {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 30px !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease !important;
}

/* Open state */
#ubq-quiz .frq-card-open .frq-card-header {
    background: transparent !important;
}

#ubq-quiz .frq-card-open .frq-card-body {
    max-height: 600px !important;
    opacity: 1 !important;
    padding: 4px 30px 30px !important;
}


#ubq-quiz .frq-card-question {
    line-height: 1.8 !important;
    color: #1a1a1a !important;
    margin: 12px 0 20px 0 !important;
    font-size: .95em !important;
}

#ubq-quiz .input-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: start !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Textarea — flush inside accordion, thin top border for separation */
#ubq-quiz .user-input {
    font-family: Inter, -apple-system, sans-serif !important;
    font-size: .88em !important;
    border: none !important;
    border-top: 1px solid #ebebeb !important;
    box-sizing: border-box !important;
    line-height: 1.7em !important;
    padding: 14px 50px 14px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 80px !important;
    max-height: 200px !important;
    resize: none !important;
    overflow-y: auto !important;
    width: 100% !important;
    background: transparent !important;
    color: #1a1a1a !important;
    transition: border-color 0.15s !important;
}

#ubq-quiz .user-input::placeholder {
    color: #aaa !important;
    font-weight: 400 !important;
}

#ubq-quiz .user-input:focus {
    outline: none !important;
    border-top-color: #555 !important;
}

#ubq-quiz .word-counter {
    position: absolute !important;
    font-size: .75em !important;
    color: #999 !important;
    right: 0 !important;
    top: -20px !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important;
    line-height: normal !important;
    width: auto !important;
    text-align: right !important;
    font-family: Inter, sans-serif !important;
}

#ubq-quiz .ubq-img-upload-btn {
    position: absolute !important;
    right: 0 !important;
    bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    color: #555 !important;
    cursor: pointer !important;
    transition: box-shadow 0.15s, transform 0.15s, color 0.15s !important;
    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    line-height: 1 !important;
}

#ubq-quiz .ubq-img-upload-btn:hover {
    color: #1a1a1a !important;
    box-shadow: 0px 5px 14px -3px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(25,28,33,0.1) !important;
    transform: translateY(-1px) !important;
}

#ubq-quiz .ubq-img-upload-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* Action buttons — the design source of truth for shadows */
#ubq-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#ubq-actions button {
    font-size: 0.85em;
    font-weight: 500 !important;
    font-family: Poppins;
    background: #0072ff;
    color: white;
    border: none;
    line-height: normal;
    border-radius: 100px;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08);
    padding: 15px;
    flex-grow: 1;
    flex-basis: 0;
    white-space: nowrap;
    margin: 0;
    justify-content: center;
}

#ubq-actions button:hover {
    box-shadow: 0px 4px 8px -2px rgba(0,0,0,0.18), 0px 2px 4px -1px rgba(25,28,33,0.08), 0px 0px 0px 1px rgba(25,28,33,0.12);
    transform: translateY(-2px);
}

.button2 {
    color: #3E3E3E !important;
    background: white !important;
}

/* Credits bar — shown dynamically after grading */
#ubq-quiz #ubq-credits-bar {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: white !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

#ubq-quiz .ubq-credits-count {
    font-size: .75em !important;
    color: #666 !important;
    font-weight: 500 !important;
    font-family: Inter, sans-serif !important;
}

#ubq-quiz .ubq-credits-separator {
    font-size: .75em !important;
    color: #d0d0d0 !important;
}

#ubq-quiz .ubq-credits-empty {
    font-size: .75em !important;
    color: #999 !important;
    font-weight: 500 !important;
    font-family: Inter, sans-serif !important;
}

#ubq-quiz .ubq-go-pro-link {
    font-size: .75em !important;
    color: #0072ff !important;
    font-weight: 600 !important;
    font-family: Inter, sans-serif !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: opacity 0.15s !important;
}

#ubq-quiz .ubq-go-pro-link:hover {
    opacity: 0.7 !important;
}

#ubq-quiz .ubq-go-pro-btn {
    font-size: .75em !important;
    color: white !important;
    font-weight: 600 !important;
    font-family: Inter, sans-serif !important;
    background: #0072ff !important;
    border: none !important;
    padding: 6px 14px !important;
    margin: 2px 0 0 0 !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    transition: box-shadow 0.15s !important;
}

#ubq-quiz .ubq-go-pro-btn:hover {
    box-shadow: 0px 4px 8px -2px rgba(0,0,0,0.18), 0px 2px 4px -1px rgba(25,28,33,0.08), 0px 0px 0px 1px rgba(25,28,33,0.12) !important;
}

#ubq-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#0072ff 90%,#0000) top/3px 3px no-repeat,
    conic-gradient(#0000 30%,#0072ff);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
    mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
    animation: spin 1s infinite linear;
}

/* Popup styling */
.ubq-popup {
    font-size: .85em;
    color: black;
    font-family: Poppins;
    font-weight: 500;
    line-height: normal;
    position: fixed;
    min-height: 50px;
    min-width: 120px;
    max-width: 275px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0px 4px 12px -2px rgba(0,0,0,0.15), 0px 0px 0px 1px rgba(25,28,33,0.08);
    text-align: center;
    z-index: 10000;
    border-radius: 100px;
    animation: ubqPopupfadeIn .5s forwards, ubqPopupfadeOut .5s 5s forwards;
}

/* Ubq Popup Icon styling */
.ubq-popup-icon {
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.3em;
    width: 1.3em;
}

.ubq-popup-icon svg {
    height: 20px;
    width: 20px;
}

/* Feedback container */
#ubq-quiz .ubqfeedback {
    display: none;
    margin-top: 20px !important;
    font-family: Inter, -apple-system, sans-serif !important;
    font-size: .95em !important;
    letter-spacing: .01em !important;
    padding: 0 20px;
    background: white !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    max-height: 0;
    overflow: scroll;
    opacity: 0;
    animation: expandReveal 2s ease forwards;
    flex-direction: column !important;
    gap: 10px !important;
    line-height: 1.8em !important;
    width: 100% !important;
}

#ubq-quiz .ubqfeedback p {
    line-height: 1.8em !important;
    font-size: .95em !important;
}

#ubq-quiz .ubqfeedback table td {
    line-height: 1.8em !important;
    font-size: .95em !important;
}

#ubq-quiz #feedback-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    line-height: 2em !important;
    margin-bottom: 10px !important;
    font-size: 1.05em !important;
    color: #1a1a1a !important;
}

/* Explanation — unconstrained, renders full content */
#ubq-quiz #ubq-explanation {
    display: none;
    width: 100% !important;
    font-family: Inter, -apple-system, sans-serif !important;
    font-size: .95em !important;
    line-height: 1.8 !important;
    color: #1a1a1a !important;
    margin-top: 20px !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    max-height: none;
    overflow: visible;
    opacity: 1;
    animation: none;
}

/* Answer content injected into explanation container */
#ubq-quiz .ubq-answer-content {
    width: 100% !important;
    padding: 16px 18px !important;
    background: white !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
}

#ubq-quiz .ubq-explanation-content {
    width: 100% !important;
    overflow-x: auto !important;
    padding: 1px !important;
}

#ubq-quiz .ubq-explanation-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: .95em !important;
    margin: 12px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
}

#ubq-quiz .ubq-explanation-content td,
#ubq-quiz .ubq-explanation-content th {
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: top !important;
    text-align: left !important;
    line-height: 1.8 !important;
}

#ubq-quiz .ubq-explanation-content tr:last-child td {
    border-bottom: none !important;
}

/* Add vertical separator between columns */
#ubq-quiz .ubq-explanation-content td + td,
#ubq-quiz .ubq-explanation-content th + th {
    border-left: 1px solid #f0f0f0 !important;
}

#ubq-quiz .ubq-explanation-content th {
    background: #fafafa !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #ebebeb !important;
}

#ubq-quiz .ubq-explanation-content p {
    line-height: 1.8 !important;
    margin: 0 0 8px 0 !important;
    font-size: .95em !important;
}

/* Explanation header — simple and clean */
#ubq-quiz #explanation-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
}

#ubq-quiz #explanation-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
    line-height: normal !important;
    color: #1a1a1a !important;
}

#ubq-quiz #tot_likes {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: .82em !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: #555 !important;
    background: white !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(25,28,33,0.08) !important;
    transition: box-shadow .15s, color .15s, transform .15s !important;
    position: relative !important;
    overflow: visible !important;
}

#ubq-quiz #tot_likes:hover {
    color: #1a1a1a !important;
    box-shadow: 0px 5px 14px -3px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(25,28,33,0.1) !important;
    transform: translateY(-1px) !important;
}

#ubq-quiz #tot_likes:hover #like-button svg {
    stroke: #ff3b5c !important;
}

/* Like button — inline inside the upvote pill */
#ubq-quiz #like-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    background: none !important;
}

#ubq-quiz #like-button svg {
    height: 16px !important;
    width: 16px !important;
    stroke: #999 !important;
    fill: none !important;
    transition: stroke 0.2s ease, fill 0.2s ease !important;
}

/* Liked state — pill text turns red, heart fills red */
#ubq-quiz #tot_likes.liked {
    color: #ff3b5c !important;
}

#ubq-quiz #tot_likes.liked #like-button svg {
    fill: #ff3b5c !important;
    stroke: #ff3b5c !important;
}

/* Heart burst container */
#ubq-quiz .heart-burst {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

#ubq-quiz .heart-burst .particle {
    position: absolute !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

#ubq-quiz #tot_likes.burst-active .particle {
    animation: burstParticle 0.6s cubic-bezier(.22,.61,.36,1) forwards !important;
}

#ubq-quiz #tot_likes.burst-active #like-button {
    animation: heartPop 0.45s cubic-bezier(.17,.67,.35,1.5) !important;
}

/* Heart burst ring flash */
#ubq-quiz .heart-ring {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) scale(0);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 2.5px solid #ff3b5c !important;
    opacity: 0;
    pointer-events: none !important;
}

#ubq-quiz #tot_likes.burst-active .heart-ring {
    animation: ringFlash 0.5s cubic-bezier(.22,.61,.36,1) forwards !important;
}

.katex {
    font-size: 1.22em !important;
}

/* Adjust fractions in inline math only */
.katex:not(.katex-display) .mfrac {
    line-height: 1.5em !important;
}

/* Adjust superscripts*/
.katex .msup .vlist-t {
    font-size: .9em !important;
}

/* Adjust subscripts */
.katex .msub .vlist-t {
    font-size: .9em !important;
}

/**** All UBQ Animations ****/

/* Vertically flips stats*/
.flip {
    display: inline-block;
    backface-visibility: hidden;
    animation: flip-animation 0.6s;
}

.ubq-popup-shake {
    animation: ubq-shake .5s, ubqPopupfadeOut .5s 5s forwards;
}

/* Fades popups in and out */
@keyframes ubqPopupfadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ubqPopupfadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Shakes Popups */
@keyframes ubq-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* For feedback containers */
@keyframes expandReveal {
    0% {
        max-height: 0;
        opacity: 0;
        padding: 0 20px;
    }
    100% {
        max-height: 80vh;
        opacity: 1;
        padding: 20px;
    }
}

/* Vertical flip for all numbers updates */
@keyframes flip-animation {
    0% {
        transform: rotateX(0);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

/* Heart pop animation */
@keyframes heartPop {
    0% { transform: scale(1); }
    15% { transform: scale(0.6); }
    40% { transform: scale(1.3); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Heart burst particles fly outward */
@keyframes burstParticle {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(1) translate(0,0); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) translate(var(--tx), var(--ty)); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(0) translate(calc(var(--tx) * 1.6), calc(var(--ty) * 1.6)); }
}

/* Ring flash behind heart */
@keyframes ringFlash {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
    60% { transform: translate(-50%,-50%) scale(1.1); opacity: 0.3; }
    100% { transform: translate(-50%,-50%) scale(1.3); opacity: 0; }
}

/* UBQ Loading Indicator */
@keyframes spin{
    100% { transform: rotate(1turn); }
  }

/**** Mobile Seletor Queries ****/

@media (max-width: 767px) {
    #ubq-actions {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-top: .5em !important;
        padding-bottom: .5em !important;
    }

    #ubq-quiz .frq-card-header {
        padding: 18px 24px !important;
    }

    #ubq-quiz .frq-card-open .frq-card-body {
        padding: 4px 24px 24px !important;
    }
}