/* MyDesk — 水テーマ（川・雨・水色ガラス） */

:root {
  --water-deep: #041018;
  --water-mid: #0c2a3d;
  --water-sky: #38bdf8;
  --water-foam: #e0f2fe;
  --water-mist: rgba(186, 230, 253, 0.45);

  --bg: #041018;
  --bg-elevated: #0a1f2e;
  --surface: rgba(10, 35, 52, 0.78);
  --surface-solid: #0c2436;
  --surface-hi: #123048;
  --border: rgba(186, 230, 253, 0.1);
  --border-strong: rgba(186, 230, 253, 0.2);
  --text: #f0f9ff;
  --muted: #7db8d4;
  --accent: #38bdf8;
  --accent-alt: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --accent-mid: rgba(56, 189, 248, 0.26);
  --accent-hover: #7dd3fc;
  --accent-pressed: #0ea5e9;
  --accent-glow: rgba(56, 189, 248, 0.38);
  --high: #fda4af;
  --medium: #fcd34d;
  --low: #94a3b8;
  --semantic-success: #2dd4bf;
  --semantic-success-soft: rgba(45, 212, 191, 0.16);
  --semantic-warning: #fbbf24;
  --semantic-warning-soft: rgba(251, 191, 36, 0.16);
  --semantic-danger: #fb7185;
  --semantic-danger-soft: rgba(251, 113, 133, 0.16);
  --semantic-info: #38bdf8;
  --semantic-info-soft: rgba(56, 189, 248, 0.16);
  --glass-regular: rgba(8, 28, 44, 0.68);
  --glass-border: rgba(186, 230, 253, 0.18);
  --glass-highlight: rgba(224, 242, 254, 0.1);
  --bg-grad-1: rgba(56, 189, 248, 0.28);
  --bg-grad-2: rgba(224, 242, 254, 0.1);
  --bg-grad-3: rgba(14, 165, 233, 0.18);
}

:root[data-theme="light"] {
  --bg: #f0f9ff;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-hi: #e0f2fe;
  --border: rgba(14, 116, 144, 0.1);
  --border-strong: rgba(14, 116, 144, 0.18);
  --text: #0c4a6e;
  --muted: #0369a1;
  --accent: #0284c7;
  --accent-alt: #0ea5e9;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --accent-mid: rgba(2, 132, 199, 0.2);
  --accent-hover: #0369a1;
  --accent-pressed: #075985;
  --accent-glow: rgba(2, 132, 199, 0.22);
  --glass-regular: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(14, 116, 144, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --bg-grad-1: rgba(56, 189, 248, 0.2);
  --bg-grad-2: rgba(224, 242, 254, 0.55);
  --bg-grad-3: rgba(14, 165, 233, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f0f9ff;
    --bg-elevated: #ffffff;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;
    --surface-hi: #e0f2fe;
    --border: rgba(14, 116, 144, 0.1);
    --border-strong: rgba(14, 116, 144, 0.18);
    --text: #0c4a6e;
    --muted: #0369a1;
    --accent: #0284c7;
    --accent-alt: #0ea5e9;
    --accent-soft: rgba(2, 132, 199, 0.12);
    --accent-mid: rgba(2, 132, 199, 0.2);
    --accent-hover: #0369a1;
    --accent-pressed: #075985;
    --accent-glow: rgba(2, 132, 199, 0.22);
    --glass-regular: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(14, 116, 144, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.75);
    --bg-grad-1: rgba(56, 189, 248, 0.2);
    --bg-grad-2: rgba(224, 242, 254, 0.55);
    --bg-grad-3: rgba(14, 165, 233, 0.12);
  }
}

body {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0%, transparent 35%),
    radial-gradient(ellipse 80% 60% at 10% -10%, var(--bg-grad-1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 0%, var(--bg-grad-2), transparent 45%),
    radial-gradient(ellipse 70% 45% at 50% 100%, var(--bg-grad-3), transparent 55%),
    linear-gradient(175deg, var(--water-deep) 0%, var(--water-mid) 45%, #0a3048 100%);
}

:root[data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(224, 242, 254, 0.9) 0%, transparent 40%),
    radial-gradient(ellipse 80% 60% at 10% -10%, var(--bg-grad-1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 0%, var(--bg-grad-2), transparent 45%),
    radial-gradient(ellipse 70% 45% at 50% 100%, var(--bg-grad-3), transparent 55%),
    var(--bg);
}

/* 川の流れ — 壁紙レイヤー */
body::before {
  animation: water-river-flow 28s ease-in-out infinite alternate;
  background-size: 130% 130%, 120% 120%, 110% 110%;
}

@keyframes water-river-flow {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
    opacity: 1;
  }
  100% {
    background-position: 6% 4%, 94% 6%, 48% 96%;
    opacity: 0.92;
  }
}

/* 雨・飛沫 */
body::after {
  content: "";
  position: fixed;
  inset: -20% 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(
      178deg,
      transparent 0,
      transparent 11px,
      rgba(186, 230, 253, 0.025) 11px,
      rgba(224, 242, 254, 0.07) 12px
    ),
    repeating-linear-gradient(
      182deg,
      transparent 0,
      transparent 19px,
      rgba(125, 211, 252, 0.02) 19px,
      rgba(186, 230, 253, 0.05) 20px
    );
  animation: water-rain-fall 14s linear infinite;
}

:root[data-theme="light"] body::after {
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(
      178deg,
      transparent 0,
      transparent 11px,
      rgba(14, 165, 233, 0.03) 11px,
      rgba(56, 189, 248, 0.06) 12px
    ),
    repeating-linear-gradient(
      182deg,
      transparent 0,
      transparent 19px,
      rgba(2, 132, 199, 0.025) 19px,
      rgba(14, 165, 233, 0.05) 20px
    );
}

@keyframes water-rain-fall {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}

.chip.active {
  border-color: rgba(56, 189, 248, 0.45);
}

.cal-cell-today {
  border-color: rgba(56, 189, 248, 0.4);
}

.ios-bento-mq {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(224, 242, 254, 0.12));
  border-color: rgba(125, 211, 252, 0.35);
}

:root[data-theme="light"] .ios-bento-mq {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(224, 242, 254, 0.65));
}

.nav-btn-ai.active {
  background: linear-gradient(135deg, var(--accent-alt) 0%, var(--accent-pressed) 100%);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
}

.pwa-install-banner {
  border-color: rgba(56, 189, 248, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}