ft_transcendence/frontend/src/chat/chat.css

@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;
}