/* styles.css */
body {
	padding: 0;
	margin: 0;
  background-color: #000033;
	/* background: linear-gradient(to right, #000033, #000000); */
	background-repeat: no-repeat;
  background-attachment: fixed;
}

#startButton {
  width: 30%;
  height: 50px;
  font-size: 1rem; /* 기본 글씨 크기 */
  font-weight: bold;
  margin-top: 30px;
}

.input_info{
  font-size: 1rem;
}

.loading-spinner {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #32f091; /* Blue */
  border-radius: 50%;
  width: 10px; /* Fixed size for the spinner */
  height: 10px; /* Fixed size for the spinner */
  animation: spin 2s linear infinite;
  position: fixed;
  top: 50%; /* Vertically centers the spinner */
  left: 50%; /* Horizontally centers the spinner */
  transform: translate(-50%, -50%); /* Moves the spinner back by 50% of its width and height */
  z-index: 9999; /* Ensure the spinner is on top */
}

.intro-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #c3def3;
}

.intro-container img{
  width: 30%;
  min-width: 100px;
  margin-bottom: 30px;
}

::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(25,147,147,0.1);
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(25,147,147,0.2);
}

.chat-container {
  width: 90%;
  height: 70%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.kakao-ad{
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  margin: 20px 0;
  width: 100%; /* 필요에 따라 조정 */
  height: 100%; /* 필요에 따라 조정 */
}

h1 {
  text-align: center;
  color: #c3def3;
}

.chat-thread {
  flex-grow: 1;
  margin: 24px auto 0 auto;
  padding: 0 20px 0 0;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: calc(100% - 100px); /* 입력창 높이 고려 */
}

.chat-thread li {
	position: relative;
	clear: both;
	display: inline-block;
	padding: 16px 40px 16px 20px;
	margin: 0 0 30px 0;
	font: 16px/20px 'Noto Sans', sans-serif;
	border-radius: 10px;
	background-color: rgba(25,147,147,0.2);
}

/* Chat - Avatar */
.chat-thread li:before {
	position: absolute;
	top: 0;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	content: '';
}

/* Chat - Speech Bubble Arrow */
.chat-thread li:after {
	position: absolute;
  top: 15px;
	content: '';
	width: 0;
	height: 0;
	border-top: 15px solid rgba(25,147,147,0.2);
}

.chat-thread li:nth-child(odd) {
	animation: show-chat-odd 0.15s 1 ease-in;
	-moz-animation: show-chat-odd 0.15s 1 ease-in;
	-webkit-animation: show-chat-odd 0.15s 1 ease-in;
	float: right;
	margin-right: 80px;
	color: #c3def3;
}

.chat-thread li:nth-child(odd):before {
	right: -80px;
  color: #f8f8f8;
  font-size: larger;
  font-weight: bold;
  content: 'server';
}

.chat-thread li:nth-child(odd):after {
	border-right: 15px solid transparent;
	right: -15px;
}

.chat-thread li:nth-child(even) {
	animation: show-chat-even 0.15s 1 ease-in;
	-moz-animation: show-chat-even 0.15s 1 ease-in;
	-webkit-animation: show-chat-even 0.15s 1 ease-in;
	float: left;
	margin-left: 80px;
	color: #ffffff;
}

.chat-thread li:nth-child(even):before {
  left: -80px;
  color: #f8f8f8;
  font-size: larger;
  font-weight: bold;
  content: 'user';
}

.chat-thread li:nth-child(even):after {
	border-left: 15px solid transparent;
	left: -15px;
}

.chat-window {
	position: fixed;
	bottom: 18px;
  width: 90%;
  max-width: 600px;
  left: 50%;
  transform: translateX(-50%);
}

.chat-window-message {
	width: 100%;
	height: 48px;
	font: 32px/48px 'Noto Sans', sans-serif;
	background: none;
	color: #fbfdfa;
	border: 0;
	border-bottom: 5px solid rgba(183, 214, 214, 0.2);
	outline: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@-moz-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@-webkit-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}

@-moz-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}

@-webkit-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}