/* Container isolates the calculator from the theme */
.ai-calc-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 1;
    background: radial-gradient(ellipse at 40% 30%, #12122a 0%, #08080f 55%, #050510 100%);
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
}

/* Particle dots (local to container) */
.ai-calc-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(139, 92, 246, 0.5), transparent),
        radial-gradient(1px 1px at 72% 18%, rgba(6, 182, 212, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 45% 65%, rgba(217, 70, 239, 0.4), transparent),
        radial-gradient(1px 1px at 80% 70%, rgba(139, 92, 246, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 25% 78%, rgba(6, 182, 212, 0.4), transparent),
        radial-gradient(1px 1px at 60% 35%, rgba(167, 139, 250, 0.45), transparent),
        radial-gradient(1px 1px at 10% 55%, rgba(217, 70, 239, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 90% 45%, rgba(139, 92, 246, 0.4), transparent),
        radial-gradient(1px 1px at 35% 10%, rgba(6, 182, 212, 0.5), transparent),
        radial-gradient(1px 1px at 55% 85%, rgba(167, 139, 250, 0.4), transparent);
    animation: particlesDrift 18s ease-in-out infinite;
    z-index: 0;
}

@keyframes particlesDrift {
    0%, 100% { opacity: 0.7; transform: translate(0, 0); }
    25% { opacity: 1; transform: translate(3px, -4px); }
    50% { opacity: 0.6; transform: translate(-2px, 5px); }
    75% { opacity: 0.9; transform: translate(4px, -2px); }
}

/* Original calculator styles (unchanged, but now scoped) */
:root {
    --bg: #0a0a0f;
    --panel-bg: #111118;
    --display-bg: #0d0d18;
    --btn-basic: #1a1a28;
    --btn-basic-hover: #242438;
    --btn-number: #1e1e2c;
    --btn-number-hover: #2a2a3c;
    --btn-operator: #1c1830;
    --btn-operator-hover: #2a2244;
    --btn-equals: #3a1f5c;
    --btn-equals-hover: #4e2d78;
    --btn-sci: #141420;
    --btn-sci-hover: #1f1f32;
    --btn-func: #16122a;
    --btn-func-hover: #221d3d;
    --text-primary: #e0e0f0;
    --text-secondary: #a0a0c0;
    --text-display: #d0c8ff;
    --accent: #8b5cf6;
    --accent-glow: #a78bfa;
    --accent-cyan: #06b6d4;
    --accent-pink: #d946ef;
    --border-subtle: #1e1e32;
    --shadow-glow: 0 0 18px rgba(139, 92, 246, 0.25);
    --shadow-glow-cyan: 0 0 14px rgba(6, 182, 212, 0.2);
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.calculator-wrapper {
    position: relative;
    z-index: 2;
    background: var(--panel-bg);
    border-radius: 18px;
    padding: 16px;
    box-shadow:
        0 0 0 1px var(--border-subtle),
        0 20px 60px rgba(0, 0, 0, 0.6),
        var(--shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    max-width: 420px;
    width: 100%;
    backdrop-filter: blur(4px);
}

.ai-badge { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 0 2px; }
.ai-badge .dot-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan), 0 0 18px rgba(6, 182, 212, 0.5);
    animation: pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 6px var(--accent-cyan), 0 0 14px rgba(6, 182, 212, 0.4); }
    50% { box-shadow: 0 0 14px var(--accent-cyan), 0 0 28px rgba(6, 182, 212, 0.7); }
}
.ai-badge span {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent-cyan);
}
.ai-badge .badge-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.5), transparent);
    border-radius: 1px;
}

.mode-toggle-row {
    display: flex; gap: 4px; margin-bottom: 10px;
    background: #0c0c16; border-radius: 20px; padding: 3px;
    border: 1px solid var(--border-subtle);
}
.mode-toggle-btn {
    flex: 1; padding: 6px 10px; border-radius: 18px; border: none;
    cursor: pointer; font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: all 0.3s ease; font-family: var(--font-sans);
    color: var(--text-secondary); background: transparent; white-space: nowrap;
}
.mode-toggle-btn.active {
    background: var(--accent); color: #fff;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.mode-toggle-btn:hover:not(.active) { color: #c0c0e0; background: rgba(255, 255, 255, 0.03); }

.display-container {
    background: var(--display-bg); border-radius: 12px; padding: 12px 14px;
    margin-bottom: 10px; border: 1px solid var(--border-subtle);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.08);
    min-height: 68px; display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-end;
}
.display-expression {
    font-size: 11px; color: #6b6b8a; font-family: var(--font-mono);
    word-break: break-all; text-align: right; min-height: 16px;
    letter-spacing: 0.03em; line-height: 1.3; width: 100%; overflow-wrap: anywhere;
}
.display-result {
    font-size: 26px; font-weight: 700; color: var(--text-display);
    font-family: var(--font-mono); letter-spacing: 0.02em; text-align: right;
    width: 100%; overflow-wrap: anywhere; line-height: 1.2;
    text-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
    transition: all 0.2s ease;
}
.display-result.error { color: #f87171; font-size: 14px; text-shadow: 0 0 12px rgba(248, 113, 113, 0.4); }

.angle-indicator {
    font-size: 9px; color: var(--accent-pink); letter-spacing: 0.06em;
    font-weight: 600; margin-bottom: 2px; transition: all 0.2s ease;
    cursor: pointer; user-select: none; padding: 2px 6px;
    border-radius: 8px; background: rgba(217, 70, 239, 0.08);
}
.angle-indicator:hover { background: rgba(217, 70, 239, 0.18); color: #e879f9; }

.buttons-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.buttons-grid.basic-mode { grid-template-columns: repeat(4, 1fr); }

.calc-btn {
    padding: 7px 4px; border-radius: 8px; border: 1px solid transparent;
    cursor: pointer; font-size: 11px; font-weight: 500;
    font-family: var(--font-sans); transition: all 0.18s ease;
    color: var(--text-primary); background: var(--btn-basic);
    text-align: center; white-space: nowrap; letter-spacing: 0.03em;
    position: relative; overflow: hidden; user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); line-height: 1.2;
}
.calc-btn:active { transform: scale(0.94); transition: all 0.06s ease; }
.calc-btn:hover { border-color: rgba(255, 255, 255, 0.1); background: var(--btn-basic-hover); }

.calc-btn.number { background: var(--btn-number); font-weight: 600; font-size: 12px; color: #e8e8f8; }
.calc-btn.number:hover { background: var(--btn-number-hover); border-color: rgba(255, 255, 255, 0.12); }

.calc-btn.operator { background: var(--btn-operator); color: #c4b5fd; font-weight: 700; font-size: 12px; }
.calc-btn.operator:hover { background: var(--btn-operator-hover); border-color: rgba(139, 92, 246, 0.35); box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }

.calc-btn.equals {
    background: var(--btn-equals); color: #fff; font-weight: 700; font-size: 13px;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5);
    border-color: rgba(139, 92, 246, 0.4);
}
.calc-btn.equals:hover { background: var(--btn-equals-hover); box-shadow: 0 0 22px rgba(139, 92, 246, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5); }

.calc-btn.sci-func {
    background: var(--btn-func); color: #a5b4fc; font-size: 9.5px;
    font-weight: 500; letter-spacing: 0.04em;
}
.calc-btn.sci-func:hover {
    background: var(--btn-func-hover); border-color: rgba(139, 92, 246, 0.3);
    color: #c7d2fe; box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
}

.calc-btn.special { background: #1a1028; color: #f0a0c0; font-weight: 600; font-size: 10px; }
.calc-btn.special:hover { background: #261838; border-color: rgba(217, 70, 239, 0.3); box-shadow: 0 0 8px rgba(217, 70, 239, 0.2); }

.calc-btn.memory { background: #111828; color: #7dd3fc; font-size: 9.5px; font-weight: 500; }
.calc-btn.memory:hover { background: #182238; border-color: rgba(6, 182, 212, 0.3); box-shadow: 0 0 8px rgba(6, 182, 212, 0.18); }

.calc-btn.span-2 { grid-column: span 2; }

.calculator-wrapper::after {
    content: ''; position: absolute; bottom: -1px; left: 20px; right: 20px;
    height: 2px; background: linear-gradient(90deg, transparent, var(--accent-glow), var(--accent-cyan), var(--accent-glow), transparent);
    border-radius: 2px; opacity: 0.5; filter: blur(2px);
}

/* Responsive adjustments */
@media (max-width: 440px) {
    .calculator-wrapper { padding: 10px; border-radius: 14px; max-width: 100%; }
    .buttons-grid { gap: 3px; }
    .calc-btn { padding: 6px 2px; font-size: 9.5px; border-radius: 6px; }
    .calc-btn.number { font-size: 10.5px; }
    .calc-btn.operator { font-size: 10.5px; }
    .calc-btn.sci-func { font-size: 8px; }
    .calc-btn.equals { font-size: 11px; }
    .display-result { font-size: 22px; }
    .display-expression { font-size: 10px; }
    .mode-toggle-btn { font-size: 9px; padding: 5px 6px; }
}
@media (max-width: 340px) {
    .buttons-grid { gap: 2px; }
    .calc-btn { padding: 5px 1px; font-size: 8px; border-radius: 5px; }
    .calc-btn.number { font-size: 9px; }
    .calc-btn.sci-func { font-size: 7px; letter-spacing: 0.02em; }
    .display-result { font-size: 19px; }
}