/* ═══════════════ 番茄钟 · 独立全屏页面 ═══════════════ */

.pomodoro-shell {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,130,90,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #161118 0%, #18151c 30%, #15171d 60%, #12161c 100%);
  background-size: cover; background-position: center;
  color: rgba(255,255,255,0.9);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  animation: pomoFadeIn 0.35s ease-out;
  min-height: 0;
  overflow: hidden;
}
/* 背景图暗色覆盖层（减淡，去掉灰色滤镜效果） */
.pomo-bg-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(0,0,0,0.18);
  pointer-events: none;
}

/* ★ 全屏透明触控层：点哪里都能触发（但不拦截按钮点击） */
.pomo-touch-layer {
  position: absolute; inset: 0; z-index: 5;
  cursor: pointer;
  /* 透明，不遮挡视觉 */
  background: transparent;
  pointer-events: none;  /* ★ 让点击穿透到下方的按钮 */
}
/* 浮动导航栏 */
.pomo-nav-float {
  position: relative; z-index: 2;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes pomoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pomo-nav {
  display: flex; align-items: center;
  padding: calc(10px + var(--sab, 0px)) 10px 8px; gap: 8px; flex-shrink: 0;
}
.pomo-nav-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: rgba(255,255,255,0.7); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pomo-nav-title {
  font-size: 17px; font-weight: 600; letter-spacing: 2px;
  flex: 1; text-align: center; margin-right: 36px;
}

/* ─── 设置页 ─── */
.pomo-setup {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 12px 24px calc(24px + var(--sab, 0px));
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.pomo-setup-title {
  font-size: 30px; font-weight: 300; letter-spacing: 4px;
  margin: 2px 0 0;
}
.pomo-setup-label {
  font-size: 12px; color: rgba(255,255,255,0.4);
  letter-spacing: 2px; margin-bottom: 4px;
}
.pomo-char-select {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  width: min(100%, 260px); justify-content: center;
  flex-shrink: 0;
}
.pomo-char-dropdown {
  width: 100%; max-width: 220px; height: 30px;
  border: 0; background: transparent;
  color: rgba(255,255,255,0.86); font-size: 14px; outline: none;
  position: relative; z-index: 2;
  pointer-events: auto; appearance: auto; -webkit-appearance: menulist;
}
.pomo-char-dropdown option { color: #111; }
.pomo-time-input {
  width: 112px; text-align: center; font-size: 26px; font-weight: 200;
  padding: 7px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9); outline: none; letter-spacing: 2px;
}
.pomo-goal-input {
  width: 200px; text-align: center; font-size: 15px; font-weight: 300;
  padding: 9px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9); outline: none;
}
.pomo-start-btn {
  margin-top: 4px; padding: 13px 44px; border-radius: 28px;
  border: none; background: linear-gradient(135deg, rgba(200,120,80,0.6), rgba(180,100,70,0.5));
  color: #fff; font-size: 17px; letter-spacing: 3px; cursor: pointer;
  transition: opacity 0.2s;
}
.pomo-start-btn:active { opacity: 0.7; }
.pomo-start-btn:disabled { opacity: 0.3; }

/* ─── 计时页面（全在背景之上） ─── */
.pomo-timer-page {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 16px calc(10px + var(--sab, 0px));
  gap: 4px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
.pomo-round-badge {
  font-size: 11px; color: rgba(255,255,255,0.5);
  letter-spacing: 2px; margin-bottom: 2px; flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ─── 角色名（浮动在背景上） ─── */
.pomo-char-area {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 16px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.pomo-char-area:active { background: rgba(255,255,255,0.1); }
.pomo-char-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.pomo-char-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.pomo-char-name {
  font-size: 13px; color: rgba(255,255,255,0.75);
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ─── 对话框（浮动在背景上） ─── */
.pomo-chat {
  flex-shrink: 0;
  max-height: 80px; overflow-y: auto;
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 4px 8px;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}
.pomo-chat::-webkit-scrollbar { width: 0; }
.pomo-bubble {
  padding: 6px 12px; border-radius: 12px;
  font-size: 12px; line-height: 1.5;
  max-width: 100%;
  background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-self: flex-start;
  animation: pomoBubbleIn 0.25s ease-out;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
@keyframes pomoBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pomo-bubble-empty {
  align-self: center; color: rgba(255,255,255,0.15);
  font-size: 12px; letter-spacing: 2px;
}

/* ─── 计时器（浮动在背景上） ─── */
.pomo-timer-row {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 4px; z-index: 1;
}
.pomo-timer-ring {
  position: relative; width: 110px; height: 110px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.pomo-timer-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.pomo-timer-bg {
  fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 5;
}
.pomo-timer-fill {
  fill: none; stroke: rgba(200,130,90,0.85); stroke-width: 5;
  stroke-linecap: round; transition: stroke-dashoffset 0.5s linear;
}
.pomo-timer-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pomo-time-display {
  font-size: 28px; font-weight: 200; letter-spacing: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.pomo-phase-label {
  font-size: 10px; color: rgba(255,255,255,0.5);
  letter-spacing: 1px; margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ─── 控制按钮（浮动） ─── */
.pomo-controls {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0; z-index: 1;
}
.pomo-ctrl-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pomo-ctrl-btn:active { background: rgba(255,255,255,0.15); }
.pomo-ctrl-main {
  width: 54px; height: 54px;
  background: rgba(200,130,90,0.5); color: rgba(255,255,255,0.9);
}

/* ─── 休息配置 ─── */
.pomo-break-config {
  display: flex; align-items: center; gap: 8px;
}
.pomo-break-config select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8); padding: 6px 10px; border-radius: 10px;
  font-size: 13px; outline: none;
  pointer-events: auto; appearance: auto; -webkit-appearance: menulist;
}

/* ─── 立绘上传区（设置页，居中正方形） ─── */
.pomo-illust-preview,
.pomo-illust-empty {
  width: 200px; min-height: 200px;
  flex-shrink: 0;  /* ★ 防止被 flex 布局压缩 */
  margin: 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 2px dashed rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.pomo-illust-preview:hover,
.pomo-illust-empty:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }
.pomo-illust-empty {
  flex-direction: column; gap: 6px;
}
.pomo-illust-preview {
  position: relative;
}
.pomo-illust-change-hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 6px; font-size: 10px;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.2s;
}
.pomo-illust-preview:hover .pomo-illust-change-hint { opacity: 1; }

/* ─── 总结页 ─── */
.pomo-summary {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px; gap: 16px; text-align: center;
}
.pomo-summary-icon { font-size: 56px; }
.pomo-summary-title {
  font-size: 20px; font-weight: 300; letter-spacing: 3px;
}
.pomo-summary-stats {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}
.pomo-summary-stats b { color: rgba(255,255,255,0.8); font-weight: 400; }
.pomo-summary-quote {
  margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.45);
  font-style: italic; letter-spacing: 1px; max-width: 280px;
}

/* ─── 触控涟漪动画 ─── */
@keyframes pomoTouchRipple {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}