/* pages/calculator/calculator.wxss */

/* ========== 全局 ========== */
page {
  height: 100%;
  background-color: #EBF4F8; /* Color 03 (Background) */
  display: flex;
  flex-direction: column;
}

.calculator-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ========== 显示区域 ========== */
.display-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 30rpx 40rpx 20rpx;
  background: transparent;
  position: relative;
  overflow: visible; /* Limit overflow for dropdown but visible for popup */
}

/* 顶部工具栏 */
.display-top-bar {
  position: absolute;
  top: 20rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.top-actions {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.action-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.15); /* Teal shadow */
}

.action-btn-hover {
  background-color: #F0F0F0 !important;
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(17, 97, 107, 0.1) !important;
}

/* 复制按钮特殊样式 */
.action-btn.copy-btn {
  width: auto;
  padding: 0 20rpx;
  border-radius: 36rpx;
  gap: 10rpx;
}

.copy-btn .action-text {
  font-size: 24rpx;
  color: #11616B;
  font-weight: 500;
}

.action-icon {
  font-size: 34rpx;
  color: #11616B; /* Color 01 */
}

/* Settings Dropdown Container */
.settings-container {
  position: relative;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 80rpx;
  right: 0;
  width: 240rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.15);
  padding: 10rpx 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10rpx);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 500;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  gap: 20rpx;
  transition: background 0.1s;
}

.menu-item:active {
  background-color: #f5f5f5;
}

.menu-icon {
  font-size: 36rpx;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
}

/* Mask for closing dropdown */
.settings-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400; 
  background: transparent;
}


/* 模式切换 */
.mode-indicator {
  display: flex;
  background: #ffffff;
  padding: 6rpx;
  border-radius: 16rpx; /* Reduced radius */
  box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.1);
}

.mode-indicator text {
  color: #7BBDB6; /* Color 02 */
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 12rpx; /* Reduced radius */
  background: transparent;
  border: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.mode-indicator text.active {
  color: #ffffff;
  background: #11616B; /* Color 01 */
  font-weight: 600;
  box-shadow: 0 2rpx 8rpx rgba(17, 97, 107, 0.2);
}

/* 表达式行 */
.history-text {
  font-size: 32rpx;
  color: rgba(17, 97, 107, 0.6); /* Color 01 faded */
  min-height: 44rpx;
  margin-bottom: 12rpx;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  text-align: right;
  width: 100%;
  word-break: break-all;
}

/* 当前数值 */
.current-value {
  font-size: 96rpx;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  color: #11616B; /* Color 01 */
  line-height: 1.1;
  word-break: break-all;
  text-align: right;
  width: 100%;
  transition: font-size 0.2s;
}

.current-value.shrink { font-size: 72rpx; }
.current-value.shrink-more { font-size: 56rpx; }

/* ========== 键盘区域 ========== */
.keypad-area {
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  padding: 30rpx 20rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 20rpx rgba(17, 97, 107, 0.05);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 20rpx; 
}

/* 科学键盘模式 */
.scientific-pad {
  /* 增加高度或者改变布局逻辑 if needed */
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 0;
}

.small-row {
  justify-content: space-between;
  gap: 16rpx;
}

/* 按钮通用 */
.btn {
  flex: 1;
  height: 130rpx; /* Taller buttons */
  border-radius: 30rpx; /* More rounded */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  font-weight: 400;
  background-color: #F8FBFC; /* Light gray-blue */
  color: #11616B; /* Color 01 */
  box-shadow: 0 4rpx 0 #E1E8EC;
  transition: transform 0.1s, background-color 0.2s;
}

.btn-hover {
  transform: translateY(4rpx);
  box-shadow: none !important;
}

/* 功能键 (AC, Delete, +/-) */
.btn.func {
  color: #DC8B70; /* Color 05 (Highlight) - Use Peach/Orange for clear/action */
  font-weight: 500;
  background-color: #FFF6F3; /* Light peach bg */
  box-shadow: 0 4rpx 0 #FCEBE6;
}

.btn.func.btn-hover {
  background-color: #FEDCC8 !important;
}

/* 运算符 */
.btn.operator {
  background-color: #EBF4F8; /* Color 03 */
  color: #11616B;
  font-size: 56rpx;
}

.btn.operator.btn-hover {
  background-color: #D3E7ED !important;
}

.btn.equal {
  background-color: #11616B; /* Color 01 (Primary) */
  color: #ffffff;
  box-shadow: 0 4rpx 0 #0D4A52;
}

.btn.equal.btn-hover {
  background-color: #167A85 !important;
}

/* 数字键 */
.btn.digit {
  background-color: #ffffff;
  color: #333;
  font-weight: 500;
  font-size: 52rpx;
  box-shadow: 0 4rpx 0 #EAEAEA;
}

.btn.digit.btn-hover {
  background-color: #E0E0E0 !important;
}

.btn.zero {
  flex: 2.2; /* Wider 0 button */
}

/* 科学按钮 */
.sci-btn {
  height: 90rpx;
  font-size: 32rpx;
  border-radius: 20rpx;
  background-color: #EBF4F8; /* Color 03 */
  color: #7BBDB6; /* Color 02 */
  box-shadow: 0 3rpx 0 #DEE9EE;
}

.sci-btn.btn-hover {
  background-color: #D3E7ED !important;
}

/* ========== 面板 (历史/帮助) ========== */
.history-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.history-panel.show {
  visibility: visible;
  opacity: 1;
}

.history-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); 
}

.history-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.history-panel.show .history-content {
  transform: translateY(0);
}

.history-header {
  padding: 30rpx 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.history-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #11616B;
}

.history-clear {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx;
}

.history-list {
  flex: 1;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
}

.history-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.history-item-hover {
  background-color: #f9f9f9;
}

.history-expr {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.history-result {
  font-size: 36rpx;
  color: #11616B;
  font-weight: 500;
}

.history-empty {
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  gap: 20rpx;
}

.history-empty-icon {
  font-size: 80rpx;
  opacity: 0.5;
}

/* 帮助样式 */
.help-content {
  height: 80%; /* Slightly taller */
}

.help-list {
    padding: 10rpx 40rpx;
}

.help-section {
    padding-bottom: 60rpx;
}

.help-item {
    display: flex;
    gap: 24rpx;
    margin-bottom: 40rpx;
    align-items: flex-start;
}

.help-icon {
    font-size: 40rpx;
    background: #EBF4F8;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx;
    color: #11616B;
}

.help-text {
    flex: 1;
}

.help-h1 {
    display: block;
    font-size: 30rpx;
    font-weight: bold;
    color: #11616B;
    margin-bottom: 8rpx;
}

.help-p {
    display: block;
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
    text-align: justify;
}

.share-btn-large {
    background-color: #11616B;
    color: #fff;
    border-radius: 50rpx;
    font-weight: bold;
    margin-top: 40rpx;
    box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.3);
}