/* Style the angle mode button slightly */
#angle-mode-toggle {
    min-width: 45px; /* Ensure it has some width */
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.2rem 0.4rem;
}

/* Optional: Style indicator if you use the <small> element later */
#angle-mode-indicator {
    font-weight: bold;
    font-size: 0.8em;
    margin-left: 5px; /* Space from button */
    /* Color handled by theme rules if needed */
}

/* Ensure button colors match theme */
.calculator-dark #angle-mode-toggle {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}
.calculator-dark #angle-mode-toggle:hover { background-color: #4a4a4a; }

.calculator-light #angle-mode-toggle {
    background-color: #e2e6ea;
    border-color: #ced4da;
    color: #333;
}
.calculator-light #angle-mode-toggle:hover { background-color: #d4dae0; }

/* --- End of new section --- */

/* ... rest of your existing CSS ... */


/* --- Base & Body Styles --- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh; /* Ensure body takes full height */
}

.container {
    padding: 1rem; /* Add some padding on larger screens */
}

/* --- Calculator Card --- */
.calculator {
    max-width: 400px; /* Adjusted max-width slightly */
    width: 100%; /* Take full width within container/max-width */
    border-radius: 12px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* --- Display Area --- */
.display-area {
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 1rem; /* Increased margin */
    transition: background-color 0.3s ease;
}

/* Main Display - Increased Font Size */
.display {
    background-color: transparent !important; /* Inherit from display-area */
    border: none;
    box-shadow: none; /* Remove inset shadow from input directly */
    padding: 5px 10px; /* Adjust padding */
    font-size: 2.8rem; /* <<< INCREASED FONT SIZE >>> */
    font-weight: 500; /* Slightly bolder */
    min-height: 65px; /* Ensure height even when empty */
    overflow-x: auto; /* Allow scrolling for long numbers */
    transition: color 0.3s ease;
    line-height: 1.2; /* Adjust line height */
    color: inherit; /* Inherit color from parent */
}

/* Secondary Display */
.secondary-display {
    background-color: transparent !important; /* Inherit from display-area */
    border: none;
    box-shadow: none;
    padding: 0px 10px;
    font-size: 0.9rem;
    min-height: 25px;
    overflow-x: auto;
    white-space: nowrap; /* Prevent wrapping */
    transition: color 0.3s ease;
    color: inherit; /* Inherit color from parent */
    opacity: 0.7; /* Make it less prominent */
}

/* Remove focus glow from displays */
.display:focus, .secondary-display:focus {
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

/* --- Buttons --- */
.buttons .btn {
    font-size: 1.15rem; /* Slightly larger button text */
    font-weight: 500;
    padding: 14px 5px; /* Adjust padding */
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none; /* Remove default borders */
    display: flex; /* For centering icon */
    justify-content: center;
    align-items: center;
}

.buttons .btn:active {
    transform: translateY(1px) scale(0.98); /* Subtle click feedback */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.buttons .btn i { /* Style for icons like backspace */
    font-size: 1rem;
}

/* --- Advanced Buttons Hiding Logic --- */
.advanced-hidden {
    display: none !important; /* Hide by default using !important */
}
/* Show ONLY when parent has the active class */
.calculator.advanced-mode-active .advanced-hidden {
    display: flex !important; /* Use flex to match other buttons */
}

/* Style for 'Adv' button when active */
#toggle-advanced.active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    /* Background color changes handled in theme sections */
}

/* --- History Panel --- */
.history-panel {
    display: none; /* Hidden by default, JS will toggle */
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #eee; /* For Firefox */
}
/* Webkit Scrollbar */
.history-panel::-webkit-scrollbar {
  width: 8px;
}
.history-panel::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}
.history-panel::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}


#history-list {
    margin-top: 5px;
}
#history-list li {
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    word-wrap: break-word;
}

#history-list .expression {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
    margin-bottom: 2px;
}
#history-list .result {
    font-weight: 500;
}

/* ======================== */
/* --- Dark Theme Styles --- */
/* ======================== */
.calculator-dark {
    background-color: #121212; /* Very dark background */
    color: #e0e0e0; /* Off-white text */
}

.calculator-dark .card {
     background-color: #1e1e1e; /* Dark card background */
     border: 1px solid #333;
}

.calculator-dark .display-area {
    background-color: #2a2a2a; /* Slightly lighter display background */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.calculator-dark .display {
    color: #ffffff; /* Bright white display text */
}
.calculator-dark .secondary-display {
    color: #a0a0a0; /* Dimmer gray for secondary */
}

/* Dark Theme Buttons */
.calculator-dark .btn-light { /* Number buttons */
    background-color: #4f4f4f;
    color: #ffffff;
}
.calculator-dark .btn-light:hover { background-color: #606060; }

.calculator-dark .btn-secondary, /* Memory, Adv, Hist, (), Constants */
.calculator-dark .btn-info { /* Scientific functions */
    background-color: #3a3a3a;
    color: #e0e0e0;
}
.calculator-dark .btn-secondary:hover,
.calculator-dark .btn-info:hover { background-color: #4a4a4a; }

.calculator-dark .btn-operator { /* Basic Operators (+, -, *, /) */
    background-color: #ff3333; /* RED accent for operators */
    color: #ffffff;
}
.calculator-dark .btn-operator:hover { background-color: #ff6666; }

.calculator-dark .btn-danger { /* Clear, Delete */
    background-color: #d32f2f; /* Darker distinct red */
    color: #ffffff;
}
.calculator-dark .btn-danger:hover { background-color: #e53935; }

.calculator-dark .btn-success { /* Equals */
    background-color: #e53935; /* Use RED for equals as well */
    color: #ffffff;
    font-weight: bold;
}
.calculator-dark .btn-success:hover { background-color: #f44336; }

#sound-toggle {
    min-width: 35px; /* Adjust as needed */
    /* Inherits size/padding from .btn-sm */
}
#sound-toggle i {
    font-size: 0.9rem; /* Adjust icon size */
}

/* Theme specific colors for the sound toggle button */
.calculator-dark #sound-toggle {
    border-color: #555;
    color: #ccc;
}
.calculator-dark #sound-toggle:hover { background-color: #333; }

.calculator-light #sound-toggle {
    border-color: #ccc;
    color: #555;
}
.calculator-light #sound-toggle:hover { background-color: #eee; }

/* Dark Theme Toggle Button */
.calculator-dark #theme-toggle {
    border-color: #555;
    color: #ccc;
}
.calculator-dark #theme-toggle:hover { background-color: #333; }

/* Dark Theme History Panel */
.calculator-dark .history-panel {
    background-color: #252525;
    border-color: #444;
    color: #ccc;
    scrollbar-color: #555 #333; /* Dark scrollbar for Firefox */
}
.calculator-dark .history-panel::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); }
.calculator-dark .history-panel::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }

.calculator-dark #history-list li { border-bottom: 1px solid #383838; }
.calculator-dark #history-list li:last-child { border-bottom: none; }
.calculator-dark #history-list li:hover { background-color: #333; }
.calculator-dark #clear-history { color: #ff6b6b; border-color: #ff6b6b; }
.calculator-dark #clear-history:hover { background-color: rgba(255, 107, 107, 0.1); color: #ff8f8f;}

/* Dark Theme Adv button active state */
.calculator-dark #toggle-advanced.active { background-color: #505050; }


/* ========================= */
/* --- Light Theme Styles --- */
/* ========================= */
.calculator-light {
    background-color: #f0f0f0; /* Light gray page background */
    color: #333; /* Dark text */
}

.calculator-light .card {
     background-color: #ffffff; /* White card */
     border: 1px solid #ddd;
}

.calculator-light .display-area {
    background-color: #e9ecef; /* Light gray display background */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.calculator-light .display {
    color: #212529; /* Dark display text */
}
.calculator-light .secondary-display {
    color: #6c757d; /* Bootstrap muted gray */
}

/* Light Theme Buttons */
.calculator-light .btn-light { /* Number buttons, decimal */
    background-color: #f8f9fa; /* Very light gray */
    color: #333;
    border: 1px solid #dee2e6;
}
.calculator-light .btn-light:hover { background-color: #e9ecef; }

.calculator-light .btn-secondary, /* Memory, Adv, Hist, (), Constants */
.calculator-light .btn-info { /* Scientific functions */
    background-color: #e2e6ea; /* Slightly darker gray */
    color: #333;
    border: 1px solid #ced4da;
}
.calculator-light .btn-secondary:hover,
.calculator-light .btn-info:hover { background-color: #d4dae0; }

.calculator-light .btn-operator { /* Basic Operators (+, -, *, /) */
    background-color: #adb5bd; /* Muted gray for operators */
    color: #ffffff;
    border: 1px solid #9fa6ad;
}
.calculator-light .btn-operator:hover { background-color: #9fa6ad; }

.calculator-light .btn-danger { /* Clear, Delete */
    background-color: #dc3545; /* Bootstrap danger red */
    color: #fff;
    border-color: #dc3545;
}
.calculator-light .btn-danger:hover { background-color: #c82333; }

.calculator-light .btn-success { /* Equals */
    background-color: #28a745; /* Bootstrap success green */
    color: #fff;
    border-color: #28a745;
    font-weight: bold;
}
.calculator-light .btn-success:hover { background-color: #218838; }

/* Light Theme Toggle Button */
.calculator-light #theme-toggle {
    border-color: #ccc;
    color: #555;
}
.calculator-light #theme-toggle:hover { background-color: #eee; }

/* Light Theme History Panel */
.calculator-light .history-panel {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
    scrollbar-color: #ccc #f8f9fa; /* Light scrollbar for Firefox */
}
.calculator-light .history-panel::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); }
.calculator-light .history-panel::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }

.calculator-light #history-list li { border-bottom: 1px solid #eee; }
.calculator-light #history-list li:last-child { border-bottom: none; }
.calculator-light #history-list li:hover { background-color: #e9ecef; }
.calculator-light #clear-history { color: #dc3545; border-color: #dc3545; }
.calculator-light #clear-history:hover { background-color: rgba(220, 53, 69, 0.05); color: #c82333; }

/* Light Theme Adv button active state */
.calculator-light #toggle-advanced.active { background-color: #d4dae0; }


/* --- Responsive Adjustments --- */
@media (max-width: 450px) {
    .container {
        padding: 0; /* Remove container padding on small screens */
        align-items: flex-start; /* Align card to top */
    }
    .calculator {
        max-width: 100%;
        border-radius: 0; /* Full width, no radius */
        min-height: 100vh; /* Ensure it takes full height */
        box-shadow: none;
        border: none;
    }
    .display {
        font-size: 2.2rem; /* Slightly smaller on mobile */
        min-height: 55px;
    }
    .secondary-display {
        font-size: 0.8rem;
        min-height: 20px;
    }
    .buttons .btn {
        font-size: 1rem;
        padding: 10px 5px; /* Adjust button padding */
        font-weight: normal;
    }
    .history-panel {
        max-height: 120px; /* Reduce history height */
    }
}

@media (max-width: 360px) {
    .display {
        font-size: 2rem; /* Even smaller */
        min-height: 50px;
    }
     .buttons .btn {
        font-size: 0.9rem;
        padding: 8px 4px;
    }
}