@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Quicksand:wght@300..700&display=swap');

:root {
  /* Peach Theme (Default) */
  --bg-gradient: linear-gradient(135deg, #ffe5ec 0%, #ffc2d1 100%);
  --calc-bg: #fff0f3;
  --calc-border: #ffb3c6;
  --calc-shadow: rgba(255, 143, 171, 0.4);
  
  --display-bg: #fff;
  --display-border: #ffe5ec;
  --display-text-main: #ff758f;
  --display-text-sub: #c97a8e;
  
  --btn-num-bg: #ffffff;
  --btn-num-text: #ff758f;
  --btn-num-shadow: #ffccd5;
  
  --btn-op-bg: #ffe5ec;
  --btn-op-text: #ff4d6d;
  --btn-op-shadow: #ffccd5;
  
  --btn-fn-bg: #fff0f3;
  --btn-fn-text: #ff758f;
  --btn-fn-shadow: #ffccd5;
  
  --btn-eq-bg: #ff758f;
  --btn-eq-text: #ffffff;
  --btn-eq-shadow: #c9184a;

  --mascot-accent: #ff758f;
  --mascot-blush: rgba(255, 143, 171, 0.6);
  
  --notebook-bg: #fffef0;
  --notebook-line: #e3f2fd;
  --notebook-text: #594d4d;
  --notebook-border: #ffd166;
}

/* Theme definitions */
[data-theme="matcha"] {
  --bg-gradient: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --calc-bg: #f1f8e9;
  --calc-border: #a5d6a7;
  --calc-shadow: rgba(129, 199, 132, 0.4);
  
  --display-bg: #ffffff;
  --display-border: #e8f5e9;
  --display-text-main: #388e3c;
  --display-text-sub: #689f38;
  
  --btn-num-bg: #ffffff;
  --btn-num-text: #4caf50;
  --btn-num-shadow: #c8e6c9;
  
  --btn-op-bg: #e8f5e9;
  --btn-op-text: #2e7d32;
  --btn-op-shadow: #c8e6c9;
  
  --btn-fn-bg: #f1f8e9;
  --btn-fn-text: #4caf50;
  --btn-fn-shadow: #d0e7d2;
  
  --btn-eq-bg: #4caf50;
  --btn-eq-text: #ffffff;
  --btn-eq-shadow: #1b5e20;

  --mascot-accent: #4caf50;
  --mascot-blush: rgba(165, 214, 167, 0.6);
  
  --notebook-bg: #fafdf6;
  --notebook-line: #e8f5e9;
  --notebook-text: #2e4a2f;
  --notebook-border: #a5d6a7;
}

[data-theme="lavender"] {
  --bg-gradient: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  --calc-bg: #fbf7fc;
  --calc-border: #d1c4e9;
  --calc-shadow: rgba(149, 117, 205, 0.3);
  
  --display-bg: #ffffff;
  --display-border: #f3e5f5;
  --display-text-main: #673ab7;
  --display-text-sub: #7e57c2;
  
  --btn-num-bg: #ffffff;
  --btn-num-text: #7e57c2;
  --btn-num-shadow: #e1bee7;
  
  --btn-op-bg: #f3e5f5;
  --btn-op-text: #5e35b1;
  --btn-op-shadow: #e1bee7;
  
  --btn-fn-bg: #faf5ff;
  --btn-fn-text: #7e57c2;
  --btn-fn-shadow: #e6dbf7;
  
  --btn-eq-bg: #9c27b0;
  --btn-eq-text: #ffffff;
  --btn-eq-shadow: #4a148c;

  --mascot-accent: #9c27b0;
  --mascot-blush: rgba(225, 190, 231, 0.7);
  
  --notebook-bg: #fdfbfe;
  --notebook-line: #f3e5f5;
  --notebook-text: #3c245c;
  --notebook-border: #d1c4e9;
}

[data-theme="boba"] {
  --bg-gradient: linear-gradient(135deg, #f7ebd9 0%, #edd1b0 100%);
  --calc-bg: #faf6f0;
  --calc-border: #d7ccc8;
  --calc-shadow: rgba(141, 110, 99, 0.3);
  
  --display-bg: #ffffff;
  --display-border: #f5ebe0;
  --display-text-main: #5d4037;
  --display-text-sub: #8d6e63;
  
  --btn-num-bg: #ffffff;
  --btn-num-text: #8d6e63;
  --btn-num-shadow: #d7ccc8;
  
  --btn-op-bg: #f5ebe0;
  --btn-op-text: #4e342e;
  --btn-op-shadow: #d7ccc8;
  
  --btn-fn-bg: #fcf8f2;
  --btn-fn-text: #8d6e63;
  --btn-fn-shadow: #ebdcd5;
  
  --btn-eq-bg: #8d6e63;
  --btn-eq-text: #ffffff;
  --btn-eq-shadow: #3e2723;

  --mascot-accent: #8d6e63;
  --mascot-blush: rgba(215, 204, 200, 0.7);
  
  --notebook-bg: #fffbf7;
  --notebook-line: #f5ebe0;
  --notebook-text: #4e342e;
  --notebook-border: #d7ccc8;
}

/* Dark Mode Overrides (Applied as a class or data attribute) */
[data-dark="true"] {
  --bg-gradient: linear-gradient(135deg, #1e1b24 0%, #121016 100%);
  --calc-bg: #1c1822;
  --calc-border: #3b2d4b;
  --calc-shadow: rgba(0, 0, 0, 0.5);
  
  --display-bg: #130f1a;
  --display-border: #282136;
  --display-text-main: #f0a6ca;
  --display-text-sub: #b18bb4;
  
  --btn-num-bg: #282136;
  --btn-num-text: #f0a6ca;
  --btn-num-shadow: #14101d;
  
  --btn-op-bg: #352a47;
  --btn-op-text: #ff9ebb;
  --btn-op-shadow: #181222;
  
  --btn-fn-bg: #231c30;
  --btn-fn-text: #d4a5cc;
  --btn-fn-shadow: #100b17;
  
  --btn-eq-bg: #b05c92;
  --btn-eq-text: #ffffff;
  --btn-eq-shadow: #632a4e;

  --mascot-accent: #ff9ebb;
  --mascot-blush: rgba(240, 166, 202, 0.3);
  
  --notebook-bg: #18161f;
  --notebook-line: #2b2538;
  --notebook-text: #e2cce4;
  --notebook-border: #3b2d4b;
}

/* Reset and Global Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  background: var(--bg-gradient);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: background 0.6s ease;
}

/* Background Bubbles */
.bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -60px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: floatUp 12s infinite linear;
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* Floating Animation */
@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-110vh) rotate(360deg) scale(1.2);
    opacity: 0;
  }
}

/* Main Container */
.calculator-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

/* Floating mascot container on top */
.mascot-area {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 12;
  margin-bottom: -15px; /* overlapping card cute styling */
}

.mascot-svg {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
  transform-origin: bottom center;
  animation: idleBreathing 3s ease-in-out infinite;
}

/* Mascot Keyframes */
@keyframes idleBreathing {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.03, 0.96) translateY(2px);
  }
}

/* Ear wiggle */
.mascot-ear-left {
  transform-origin: 35px 50px;
  animation: wiggleLeftEar 6s ease-in-out infinite;
}
.mascot-ear-right {
  transform-origin: 65px 50px;
  animation: wiggleRightEar 6.5s ease-in-out infinite;
}

@keyframes wiggleLeftEar {
  0%, 90%, 100% { transform: rotate(0deg); }
  93% { transform: rotate(-8deg); }
  96% { transform: rotate(4deg); }
}

@keyframes wiggleRightEar {
  0%, 88%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(8deg); }
  94% { transform: rotate(-4deg); }
}

/* Calculator Card */
.calculator-card {
  width: 100%;
  background: var(--calc-bg);
  border: 4px solid var(--calc-border);
  border-radius: 32px;
  padding: 24px 20px 20px 20px;
  box-shadow: 0 16px 0 var(--calc-border), 0 24px 40px var(--calc-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  overflow: hidden;
}

/* Header Options (Theme Switch, Dark mode, Sound, History toggle) */
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 10;
}

.controls-left {
  display: flex;
  gap: 8px;
}

.controls-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Header Buttons Style */
.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--calc-border);
  background: var(--display-bg);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 3px 0 var(--calc-border);
  outline: none;
}

.circle-btn:hover {
  transform: scale(1.1);
}

.circle-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--calc-border);
}

.circle-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--display-text-main);
  transition: fill 0.3s ease;
}

/* Theme selector dropdown trigger */
.theme-picker-container {
  position: relative;
}

.themes-menu {
  position: absolute;
  top: 44px;
  left: 0;
  background: var(--display-bg);
  border: 2px solid var(--calc-border);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 16px var(--calc-shadow);
  z-index: 50;
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.themes-menu.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--display-text-main);
  font-weight: 700;
  transition: background 0.2s;
  white-space: nowrap;
}

.theme-opt:hover {
  background: var(--btn-fn-bg);
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

.theme-dot.peach { background: #ff758f; }
.theme-dot.matcha { background: #4caf50; }
.theme-dot.lavender { background: #9c27b0; }
.theme-dot.boba { background: #8d6e63; }

/* Main Display */
.calc-display {
  background: var(--display-bg);
  border: 3px solid var(--display-border);
  border-radius: 20px;
  padding: 16px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}

.display-formula {
  font-size: 16px;
  color: var(--display-text-sub);
  min-height: 20px;
  word-break: break-all;
  text-align: right;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.5px;
}

.display-result {
  font-size: 36px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--display-text-main);
  word-break: break-all;
  width: 100%;
  text-align: right;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
}

.display-result::-webkit-scrollbar {
  display: none; /* Safari/Chrome */
}

/* Keypad Grid */
.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 10px;
}

/* Cute Dimensional Button Style */
.calc-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 700;
  padding: 14px 0;
  border-radius: 18px;
  border: 2px solid var(--calc-border);
  cursor: pointer;
  outline: none;
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Types of buttons variables */
.btn-num {
  background: var(--btn-num-bg);
  color: var(--btn-num-text);
  box-shadow: 0 5px 0 var(--btn-num-shadow);
}
.btn-num:hover {
  background: var(--btn-fn-bg);
}

.btn-op {
  background: var(--btn-op-bg);
  color: var(--btn-op-text);
  box-shadow: 0 5px 0 var(--btn-op-shadow);
}
.btn-op:hover {
  filter: brightness(0.97);
}

.btn-fn {
  background: var(--btn-fn-bg);
  color: var(--btn-fn-text);
  box-shadow: 0 5px 0 var(--btn-fn-shadow);
}
.btn-fn:hover {
  filter: brightness(0.96);
}

.btn-eq {
  background: var(--btn-eq-bg);
  color: var(--btn-eq-text);
  box-shadow: 0 5px 0 var(--btn-eq-shadow);
  border-color: var(--btn-eq-shadow);
}
.btn-eq:hover {
  filter: brightness(0.95);
}

/* Active Down Press Effect */
.calc-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--calc-border) !important;
}
.btn-eq:active {
  box-shadow: 0 1px 0 var(--btn-eq-shadow) !important;
}

/* Wide Button (e.g. Zero) */
.btn-wide {
  grid-column: span 2;
}

/* Notebook History Drawer */
.history-drawer {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: var(--notebook-bg);
  border: 4px solid var(--notebook-border);
  border-radius: 32px;
  z-index: 100;
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
}

.history-drawer.active {
  right: 0;
}

/* Drawer Header */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 2px dashed var(--calc-border);
  padding-bottom: 10px;
}

.history-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--notebook-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
  /* cute notebook lines effect */
  background-image: linear-gradient(var(--notebook-line) 1px, transparent 1px);
  background-size: 100% 28px;
  line-height: 28px;
}

/* Custom Scrollbar for cute drawer */
.history-list::-webkit-scrollbar {
  width: 6px;
}
.history-list::-webkit-scrollbar-track {
  background: transparent;
}
.history-list::-webkit-scrollbar-thumb {
  background: var(--calc-border);
  border-radius: 10px;
}

.history-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1.4;
}

.history-item:hover {
  background: rgba(0,0,0,0.02);
}

.hist-formula {
  font-size: 13px;
  color: var(--display-text-sub);
  word-break: break-all;
  font-family: 'Fredoka', sans-serif;
}

.hist-result {
  font-size: 18px;
  font-weight: 700;
  color: var(--notebook-text);
  word-break: break-all;
  font-family: 'Fredoka', sans-serif;
}

.empty-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
  color: var(--display-text-sub);
  gap: 12px;
  text-align: center;
  font-size: 14px;
}

.empty-history svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
  fill: var(--display-text-sub);
}

.clear-history-btn {
  background: transparent;
  border: 2px solid var(--calc-border);
  border-radius: 12px;
  color: var(--display-text-main);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.clear-history-btn:hover {
  background: var(--btn-fn-bg);
}

/* Mascot Face Reactions CSS helper */
/* We will control mascot state by changing class of SVG or child paths */
.mouth-happy, .eye-happy, .eye-dizzy, .mouth-dizzy, .eye-sleepy, .mouth-sleepy, .heart-burst {
  display: none;
}

/* Mascot Happy State */
.mascot-svg.happy .eye-default { display: none; }
.mascot-svg.happy .mouth-default { display: none; }
.mascot-svg.happy .eye-happy { display: block; }
.mascot-svg.happy .mouth-happy { display: block; }
.mascot-svg.happy .heart-burst { display: block; }

/* Mascot Dizzy State */
.mascot-svg.dizzy .eye-default { display: none; }
.mascot-svg.dizzy .mouth-default { display: none; }
.mascot-svg.dizzy .eye-dizzy { display: block; }
.mascot-svg.dizzy .mouth-dizzy { display: block; }
.mascot-svg.dizzy {
  animation: shakeDizzy 0.5s ease-in-out infinite;
}

@keyframes shakeDizzy {
  0%, 100% { transform: rotate(0deg) scale(1.05); }
  25% { transform: rotate(-5deg) scale(1.05); }
  75% { transform: rotate(5deg) scale(1.05); }
}

/* Mascot Sleepy State */
.mascot-svg.sleepy .eye-default { display: none; }
.mascot-svg.sleepy .mouth-default { display: none; }
.mascot-svg.sleepy .eye-sleepy { display: block; }
.mascot-svg.sleepy .mouth-sleepy { display: block; }
.mascot-svg.sleepy {
  animation: slowBreath 4s ease-in-out infinite;
}

@keyframes slowBreath {
  0%, 100% { transform: scale(0.97) translateY(2px); }
  50% { transform: scale(1.01) translateY(4px); }
}

/* Star/Heart Sparkle animations for happy state */
.heart-burst {
  animation: floatHeart 1.2s ease-out forwards;
  transform-origin: center;
}

@keyframes floatHeart {
  0% {
    transform: translateY(10px) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0;
  }
}

/* Quick toast tooltip */
.toast {
  position: absolute;
  bottom: 24px;
  background: var(--btn-num-bg);
  border: 2px solid var(--calc-border);
  color: var(--display-text-main);
  padding: 8px 16px;
  border-radius: 12px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px var(--calc-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}