/* Decorative only: the original page colour shows through the canvas. */
body { isolation: isolate; }
.ocean-background {
  position: fixed;
  z-index: -1;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  height: calc(100% - var(--header-h));
  pointer-events: none;
  user-select: none;
  opacity: .3;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ocean-background[hidden] { display: none; }
/* The home chat replaces the greeting; keep its background in the same sea. */
html[data-ocean-background] .ai-panel[data-mode="home"] { background: transparent; }
html[data-ocean-background].home-chatting #home-view { visibility: hidden; }
.background-animation-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
}
.background-animation-setting input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.background-animation-setting span { display: grid; gap: 4px; }
.background-animation-setting small { color: var(--label-3); font-size: 12px; font-weight: 400; }
@media (max-width: 760px) {
  .ocean-background { left: 0; width: 100%; bottom: 62px; height: calc(100% - var(--header-h) - 62px); opacity: .24; }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-background { display: none; }
}
@media print {
  .ocean-background { display: none; }
}