/* ================================
   JANELAS DE BLOCO DE NOTAS
   ================================ */

.note-window {
  position: fixed;
  width: 280px;
  max-width: 80vw;
  z-index: 2000;

  background: rgba(15, 23, 42, 0.404);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

/* Cabeçalho comum */
.note-header {
  padding: 0.1rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  cursor: move;
  color: #f9fafb;
}

.note-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.note-title i {
  font-size: 0.9rem;
}

.note-header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Botões de cor */
.note-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.8);
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
}

.note-color-dot:hover {
  filter: brightness(1.1);
}

/* Cores reais dos dots */
.note-color-dot[data-color="blue"] {
  background: linear-gradient(135deg, #60a5fa, #4f46e5);
}
.note-color-dot[data-color="green"] {
  background: linear-gradient(135deg, #22c55e, #15803d);
}
.note-color-dot[data-color="yellow"] {
  background: linear-gradient(135deg, #facc15, #ea580c);
}
.note-color-dot[data-color="pink"] {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.note-color-dot[data-color="purple"] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* Botão minimizar e fechar */
.note-minimize-btn,
.note-close-btn {
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  border-radius: 6px;
}

.note-minimize-btn:hover,
.note-close-btn:hover {
  background: rgba(15, 23, 42, 0.45);
}

/* Área de texto */
.note-body {
  padding: 0.45rem 0.55rem;
}

.note-textarea {
  width: 100%;
  min-height: 110px;
  max-height: 260px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.418);
  color: #f9fafb;
  font-size: 0.8rem;
  padding: 0.4rem 0.45rem;
  outline: none;
}

.note-textarea::placeholder {
  color: rgba(148, 163, 184, 0.8);
}

.note-footer {
  padding: 0.25rem 0.6rem 0.4rem;
  display: flex;
  justify-content: flex-end;
}

.note-status {
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.9);
}

/* Cores dos cabeçalhos por nota */
.note-window.note-color-blue   .note-header {
  background: linear-gradient(135deg, #60a5fa, #4f46e5);
}
.note-window.note-color-green  .note-header {
  background: linear-gradient(135deg, #22c55e, #15803d);
}
.note-window.note-color-yellow .note-header {
  background: linear-gradient(135deg, #facc15, #ea580c);
}
.note-window.note-color-pink   .note-header {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.note-window.note-color-purple .note-header {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* Texto legível em todas as cores */
.note-window.note-color-blue   .note-header,
.note-window.note-color-green  .note-header,
.note-window.note-color-yellow .note-header,
.note-window.note-color-pink   .note-header,
.note-window.note-color-purple .note-header {
  color: #0f172a;
}

/* Campo de título (estado normal) */
.note-title-input {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 120px;
  outline: none;
  padding: 0;
}

.note-title-input::placeholder {
  color: rgba(15, 23, 42, 0.65); /* funciona em headers claros */
}

/* ================================
   ESTADO MINIMIZADO – dock embaixo
   ================================ */

/* Dock embaixo, bem escondido */
.note-window.note-minimized {
  width: 220px;
  max-width: 40vw;
  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.8);

  /* mais pra baixo: só ~4px aparecendo */
  transform: translateY(calc(100% - -4px));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* No hover, sobe só um pouco (ainda fica parcialmente escondida) */
.note-window.note-minimized:hover {
  /* 60% ainda pra baixo, 40% pra dentro da tela */
  transform: translateY(calc(60% - 4px));
  box-shadow:
    0 16px 35px rgba(15, 23, 42, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

.note-window.note-minimized .note-header {
  cursor: default;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

/* esconde corpo e rodapé */
.note-window.note-minimized .note-body,
.note-window.note-minimized .note-footer {
  display: none;
}

/* esconde os dots de cor quando minimizado */
.note-window.note-minimized .note-color-dot {
  display: none;
}

/* título um pouco mais curto pra caber bonito */
.note-window.note-minimized .note-title-input {
  max-width: 110px;
}

/* --- ANIMAÇÃO DE ENTRADA AO CARREGAR A PÁGINA --- */

.note-window.note-minimized.note-intro {
  animation: noteDockIntro 0.7s ease-out forwards;
}

@keyframes noteDockIntro {
  from {
    /* começa bem fora da tela */
    transform: translateY(140%);
    opacity: 0;
  }
  to {
    /* termina exatamente na posição de repouso */
    transform: translateY(calc(100% - -4px));
    opacity: 1;
  }
}

/* ================================
   ANIMAÇÕES GERAIS (abrir/fechar)
   ================================ */

.note-window.note-anim-in {
  animation: noteFadeUp .45s ease both;
}

.note-window.note-anim-close {
  animation: noteFadeDown .35s ease both;
}

@keyframes noteFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes noteFadeDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(.98);
  }
}

/* ================================
   FIM - JANELAS DE BLOCO DE NOTAS
   ================================ */