/* Floating layers: picture viewer, toast, drop zone. */

.viewer {
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgb(0 0 0 / 0.88); }
.viewer img {
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  border-radius: 6px;
}
.viewer .icon-btn {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  background: rgb(0 0 0 / 0.5);
  color: #fff;
}

.toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--composer-h) + 0.75rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: var(--radius);
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  animation: toast-in 0.2s ease;
}
.toast button { flex: none; background: transparent; color: var(--toast-action); font-weight: 650; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } }

body.dropping::after {
  content: "Drop files to attach them to a new note";
  position: fixed;
  inset: 0.75rem;
  z-index: 60;
  display: grid;
  place-items: center;
  border: 3px dashed var(--accent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 650;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .toast { bottom: 1.5rem; }
}