:root {
    --indigo-main: #6366f1;
    --amber-main: #f59e0b;
}

/* Base App Styles */
body {
    touch-action: none;
    background-color: #f8fafc;
    -webkit-user-select: none;
    user-select: none;
}

/* Term Layouts */
.term-wrapper {
    display: flex;
    align-items: center;
    height: 64px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.term-card {
    cursor: grab;
    position: relative;
    min-width: 60px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sign-text {
    color: #94a3b8;
    font-weight: 800;
    font-size: 1.5rem;
    padding: 0 6px;
    user-select: none;
}

/* Dragging & Physics (Mobile-Safe) */
.dragging {
    cursor: grabbing;
    z-index: 1000 !important;
    opacity: 0.9;
    /* IMPORTANT: pointer-events: none is omitted here to prevent touch-freeze bugs */
    position: fixed !important;
    transform: scale(1.1) !important;
    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

/* Transposing across the equals sign */
.dragging.transposed .term-card {
    background-color: #fff7ed !important;
    border-color: #ea580c !important;
    color: #ea580c !important;
    transform: rotate(5deg);
}

/* Hit Detection Highlighting */
.drop-over-var .term-card {
    background-color: #eff6ff !important;
    border-color: var(--indigo-main) !important;
    border-style: dashed !important;
}

.drop-over-const .term-card {
    background-color: #fffbeb !important;
    border-color: var(--amber-main) !important;
    border-style: dashed !important;
}

.solving-zone-active {
    background-color: #fffbeb !important;
    border-color: var(--amber-main) !important;
    transform: scale(1.02);
}

/* ==========================================
   UPDATED: Slim Drop Targets & Bouncing Arrow
========================================== */
.reorder-zone {
    width: 16px; 
    height: 40px;
    margin: 0 -8px; /* Negative margin pulls the adjacent terms together! */
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative; 
    z-index: 10;
}

.reorder-active {
    background-color: #cbd5e1;
    width: 28px;
    margin: 0 4px; /* Expands to make room for the drop */
}

/* ==========================================
   UPDATED: Global Preview Tooltip 
========================================== */
.result-preview {
    position: fixed; /* Stays locked to the screen coords */
    transform: translate(-50%, -100%);
    background: #1e293b;
    color: white;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* Mouse passes right through it */
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.1s ease;
}

/* Fraction Division Elements */
.fraction-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 80px;
    height: 100%;
}

.fraction-line {
    width: 100%;
    height: 3px;
    background-color: currentColor;
    border-radius: 2px;
}

/* Distribution Arc container */
.arcs-overlay {
    z-index: 10;
}

/* Animations for Solved States */
.success-pulse {
    animation: success-glow 1s infinite;
}

.pending-solve {
    opacity: 0.6;
    transform: scale(0.95);
    transition: all 0.5s ease-in-out;
    color: #94a3b8 !important;
}

@keyframes success-glow {
    0%, 100% { color: #d97706; transform: scale(1); }
    50% { color: #10b981; transform: scale(1.1); }
}

/* Custom sleek scrollbar for the Step History sidebar */
#history-list::-webkit-scrollbar {
    width: 6px;
}

#history-list::-webkit-scrollbar-track {
    background: transparent;
}

#history-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

#history-list::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}/* ==========================================
   CORE ALGEBRA LAB STYLES
========================================== */

/* Prevent browser from trying to scroll/zoom when grabbing cards */
.touch-none {
    touch-action: none;
}

/* THE FIX: When dragging, we must strip all margins, disable transitions, 
   and pass pointer-events THROUGH the card so we can detect the drop zones underneath!
*/
.dragging {
    position: fixed !important;
    margin: 0 !important; 
    z-index: 9999 !important;
    pointer-events: none !important; 
    transition: none !important;
    opacity: 0.9;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Soft transition for regular cards */
.term-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.term-card:active:not(.dragging) {
    transform: scale(0.95);
}

/* Transposed state (when dragged across the '=' sign) */
.transposed .term-card {
    background-color: #f8fafc !important; /* Gray out slightly */
    border-style: dashed !important;
    opacity: 0.8;
}

/* Hovering over a valid drop zone */
.solving-zone-active {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Preview text that shows the math result (e.g. 3 + 2 = 5) */
.result-preview {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Drop targets for reordering */
.reorder-zone {
    width: 16px;
    height: 40px;
    margin: 0 2px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* The Bouncing Arrow */
.reorder-active::after {
    content: "↓";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    color: #4f46e5; /* Indigo-600 */
    font-weight: 900;
    font-size: 24px;
    animation: bounce-arrow 0.5s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes bounce-arrow {
    from { top: -28px; }
    to { top: -18px; }
}

/* Valid Combine Targets */
.drop-over-var {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}
.drop-over-const {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

/* Animations */
@keyframes popIn {
    0% { transform: translate(-50%, 10px) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
.shake-error {
    animation: shake 0.4s ease-in-out;
    border-color: #ef4444 !important;
    background-color: #fee2e2 !important;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.6); }
}
.hint-pulse {
    animation: pulse-glow 1.5s infinite;
    border-color: #6366f1 !important;
}

@keyframes success-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); text-shadow: 0 0 20px rgba(74, 222, 128, 0.5); }
    100% { transform: scale(1); }
}
.success-pulse {
    animation: success-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Visual Error Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
.shake-error {
    animation: shake 0.4s ease-in-out;
    border: 2px solid #ef4444 !important; /* Red border */
    background-color: #fee2e2 !important; /* Light red background */
}

/* Hint Pulse */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
    50% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
}
.hint-pulse {
    animation: pulse-glow 1.5s infinite;
    border: 2px solid #3b82f6 !important;
}