/* =========================================================
   NOTES CHAT – ArtisMed WhatsApp Dental Style (CLEAN + COMPLETE)
   - fundal alb + pattern stomatologic discret (ca WhatsApp)
   - modal resizable pe desktop
   - bubbles WhatsApp-like + tails
   - compose lipit jos
   - ✅ stroke fin (1px) gri abia sesizabil pe container + bubbles
========================================================= */

/* =========================
   BACKDROP
========================= */
#notesBackdrop{
  position: fixed;
  inset: 0;
  padding: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,40,.35);
  z-index: 9999;
}

#notesBackdrop.is-open{
  display: flex;
}

/* =========================
   MODAL
========================= */
#notesBackdrop .modal{
  resize: both;
  overflow: auto; /* necesar pt resize handle */

  min-width: 520px;
  min-height: 520px;
  max-width: 95vw;
  max-height: 90vh;

  width: 780px;
  height: 620px;

  border-radius: 22px;
  background: #ffffff;

  display: flex;
  flex-direction: column;

  box-shadow: 0 22px 60px rgba(0,0,0,.18);

  /* ✅ stroke fin pe modal */
  border: 1px solid rgba(15,23,42,.10);
}

/* header fix */
#notesBackdrop .modal-head{
  flex: 0 0 auto;
}

/* body flex container */
#notesBackdrop .modal-body{
  flex: 1 1 auto;
  padding: 18px;
  overflow: hidden; /* doar lista scrolleaza */
  display: flex;
  background: #ffffff; /* important: sa nu apara gri */
}

/* =========================
   CHAT WRAPPER
========================= */
#notesBackdrop .notes-chat{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================
   LISTA MESAJE (WhatsApp BG)
========================= */
#notesBackdrop .notes-list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  padding: 22px;
  border-radius: 20px;

  /* ✅ stroke fin 1px, gri foarte subtil */
  border: 1px solid rgba(15, 23, 42, 0.09);

  display: flex;
  flex-direction: column;
  gap: 12px;

  align-items: flex-start;

  /* Chat dental background */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23111' stroke-opacity='0.05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 46c0-12 9-22 22-22s22 10 22 22c0 8-3 14-7 19-2 3-2 16-8 16-5 0-6-10-7-15-1-5-4-5-5 0-1 5-2 15-7 15-6 0-6-13-8-16-4-5-7-11-7-19z'/%3E%3Ccircle cx='110' cy='60' r='12'/%3E%3Cpath d='M118 68l20 20'/%3E%3Cpath d='M28 126l26-26'/%3E%3Cpath d='M122 118h10v-10h6v10h10v6h-10v10h-6v-10h-10z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;

  /* ✅ iconite mai mici (pattern dens ca WhatsApp) */
  background-size: 80px 80px;

  /* subtil ca WhatsApp */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);

  /* scroll mai smooth */
  scroll-behavior: smooth;
}

/* empty state */
#notesBackdrop .notes-empty{
  margin: auto;
  opacity: .55;
  font-size: 14px;
  text-align: center;
}

/* =========================
   BUBBLES
========================= */
#notesBackdrop .note-item{
  position: relative;
  width: fit-content;
  max-width: min(70%, 640px);

  padding: 10px 14px;
  border-radius: 18px;

  background: #ffffff;

  /* ✅ stroke fin pe bubble alb */
  border: 1px solid rgba(15,23,42,0.07);

  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  animation: fadeIn .15s ease;
}

/* left bubble */
#notesBackdrop .note-item:not(.note-me){
  align-self: flex-start;
  color: #0f172a;
}

/* right bubble */
#notesBackdrop .note-me{
  align-self: flex-end;
  background: linear-gradient(135deg, #2e4ea3, #1f3c88);
  color: #fff;

  /* ✅ fara stroke pe cele albastre */
  border: none;
}

/* tails (WhatsApp-like) */
#notesBackdrop .note-item::after{
  content: "";
  position: absolute;
  top: 14px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

#notesBackdrop .note-item:not(.note-me)::after{
  left: -6px;
  background: #ffffff;
  box-shadow: -2px 2px 8px rgba(0,0,0,0.03);
}

#notesBackdrop .note-me::after{
  right: -6px;
  background: #1f3c88;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.10);
}

/* meta */
#notesBackdrop .note-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  opacity: .75;
  margin-bottom: 6px;
}

#notesBackdrop .note-user{
  font-weight: 800;
}

#notesBackdrop .note-time{
  margin-left: auto;
  opacity: .85;
}

#notesBackdrop .note-msg{
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

/* =========================
   COMPOSE AREA
========================= */
#notesBackdrop .notes-compose{
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

#notesBackdrop .notes-compose textarea{
  flex: 1;
  resize: none;
  padding: 12px 16px;
  border-radius: 18px;

  /* ✅ stroke fin */
  border: 1px solid rgba(15,23,42,0.12);

  font-size: 14px;
  min-height: 46px;
  max-height: 120px;
  background: #ffffff;
  outline: none;
}

#notesBackdrop .notes-compose textarea:focus{
  border-color: rgba(31,60,136,.35);
  box-shadow: 0 0 0 4px rgba(31,60,136,.10);
}

#notesBackdrop .notes-send{
  background: #1f3c88;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 12px 18px;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(15,23,42,.12);
}

#notesBackdrop .notes-send:hover{
  background: #162f6d;
  filter: brightness(1.02);
}

#notesBackdrop .notes-send:active{
  transform: scale(.99);
}

#notesBackdrop .notes-send:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

#notesBackdrop .notes-hint{
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  opacity: .5;
}

/* =========================
   BADGE (WhatsApp style)
========================= */
.notes-badge{
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 800;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  #notesBackdrop{
    padding: 12px;
  }

  #notesBackdrop .modal{
    resize: none;
    overflow: hidden;

    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 24px);

    min-width: 0;
    min-height: 0;

    border-radius: 18px;
  }

  #notesBackdrop .modal-body{
    padding: 14px;
  }

  #notesBackdrop .notes-list{
    padding: 16px;
    border-radius: 16px;
  }

  #notesBackdrop .note-item{
    max-width: 86%;
  }

  /* iOS: 16px ca sa nu faca zoom la focus */
  #notesBackdrop .notes-compose textarea{
    font-size: 16px;
    max-height: 110px;
    border-radius: 16px;
    padding: 12px 14px;
  }

  #notesBackdrop .notes-send{
    border-radius: 16px;
    padding: 12px 14px;
  }

  #notesBackdrop .notes-hint{
    font-size: 11px;
  }
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeIn{
  from {opacity:0; transform: translateY(6px);}
  to   {opacity:1; transform: translateY(0);}
}