Chat moved up to top level now in all services frontend

frontend/src/chat/chat.css

@@ -0,0 +1,306 @@
+@import "tailwindcss";
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  src: url("/fonts/DejaVuSansMono.woff2") format("woff2");
+}
+
+@tailwind utilities;
+
+.recessed {
+	@apply
+	inline-block
+	bg-gray-100
+	text-gray-800
+	p-2
+	rounded-md
+	shadow-inner
+	border
+	border-gray-300;
+}
+
+.btn-style {
+  @apply
+  w-25
+  h-8
+  border 
+  border-gray-500
+  rounded-3xl
+  bg-gray-500
+  text-white
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  hover:bg-blue-200
+  active:bg-gray-400
+  active:translate-y-px
+  active:shadow-[0_2px_0_0_black];
+}
+
+.send-btn-style {
+  @apply 
+  w-12.5 
+  h-12.5 
+  border 
+  border-gray-500
+  rounded-3xl
+  hover:bg-blue-200 
+  bg-red-100 
+  text-red-700
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  active:bg-gray-400
+  active:translate-y-px
+  active:shadow-[0_2px_0_0_black];;
+}
+
+.chatbox-style {
+  @apply
+  w-162.5
+  h-75 /* increase height if needed */
+  p-2
+  border
+  border-black
+  shadow-2xl 
+  text-left
+  text-gray-700
+  bg-white 
+  rounded-3xl
+  overflow-y-auto
+  whitespace-pre-line
+  flex
+  flex-col
+  mx-auto;
+}
+
+.system-info {
+  @apply
+  h-10
+  bg-gray-200 
+  text-gray-700 
+  p-3 
+  rounded-3xl 
+  mb-2 border 
+  border-gray-200 
+  text-center
+  shadow
+  overflow-y-auto
+  justify-end    /* 👈 forces text to bottom */
+  relative; /* needed for overlay */
+}
+
+.modal-messages {
+  @apply
+  h-20
+  bg-white 
+  text-gray-700 
+  p-3 
+  rounded-3xl 
+  mb-2 border 
+  border-gray-200 
+  text-center
+  shadow
+  overflow-y-auto
+  justify-end    /* 👈 forces text to bottom */
+  relative; /* needed for overlay */
+}
+
+
+
+.text-info {
+  @apply
+  text-blue-800
+
+}
+
+
+.chat-window-style {
+  @apply
+  w-100
+  h-12.5
+  p-6
+  border 
+  border-black
+  shadow-sm
+  flex-1
+  rounded-3xl
+  focus:bg-blue-300
+  hover:bg-blue-200
+  bg-white 
+  text-gray-800;
+}
+
+.displaybox {
+  @apply
+  fixed
+  inset-0
+  flex
+  items-center
+  justify-center
+  bg-[#43536b];
+  
+}
+
+.mainboxDisplay {
+  @apply
+  fixed 
+  top-1/2 
+  left-1/2 
+  -translate-x-1/2 
+  -translate-y-1/2 
+  bg-gray-200 w-212.5 
+  p-6 rounded-xl 
+  shadow-2xl 
+  text-center z-50;
+}
+
+.mainboxDisplay button {
+  @apply
+  cursor-pointer
+}
+
+.title {
+  @apply
+  text-6xl 
+  font-bold
+  text-gray-800
+}
+
+.ping-box {
+  @apply
+  w-37.5 
+  ml-2 border
+  border-gray-500 
+  bg-white 
+  rounded-2xl 
+  p-2 
+  shadow-md 
+  flex flex-col 
+  gap-1 
+  h-87.5;
+}
+
+.ping-title {
+  @apply
+  text-sm 
+  font-semibold
+  text-blue-800;
+}
+
+div-buddies-list {
+  @apply
+  text-black
+  whitespace-pre-wrap
+	cursor-pointer 
+	hover:text-blue-500 
+	transition-colors 
+	duration-150;
+}
+
+p {
+  @apply
+  text-black
+}
+
+div-test {
+  @apply
+  text-red-800
+  text-right;
+  
+}
+
+div-notlog {
+  @apply
+  text-red-800
+  text-3xl
+  text-center;
+}
+
+div-private {
+  @apply
+  text-blue-800;
+
+}
+
+.popUpBox {
+  @apply
+  bg-white 
+  rounded-xl 
+  shadow-xl 
+  w-200
+  h-87.5
+  p-6
+  border 
+  border-black
+
+}
+
+.profilPopup {
+  @apply 
+  fixed 
+  inset-0 
+  bg-black/50 
+  flex
+  justify-center 
+  items-center;
+}
+
+.popup-b-invite {
+  @apply
+  absolute 
+  bottom-42 
+  right-12
+}
+
+.popup-b-block {
+  @apply
+  absolute 
+  bottom-52 
+  right-12
+}
+
+.popUpMessage {
+  @apply
+  bg-white 
+  rounded-xl 
+  shadow-xl 
+  w-200
+  h-33
+  p-6
+  border 
+  border-black
+
+}
+
+.gamePopup {
+  @apply 
+  fixed 
+  inset-0 
+  bg-black/50 
+  flex
+  justify-center 
+  items-center;
+}
+
+.chat-button {
+  @apply
+  z-100 
+  text-3xl 
+  fixed bottom-6 
+  right-6 
+  w-14 
+  h-14 
+  rounded-full 
+  bg-gray-600 
+  text-white 
+  shadow-lg 
+  flex items-center 
+  justify-center 
+  hover:bg-red-700
+}
+
+
+
+.hidden{
+    display: none;
+}