#appointment {
  scroll-margin-top: 100px; /* adjust based on your header height */
}

#chat-handle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3babe2;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 9999; /* Bring to front */
	transition: background-color 0.3s ease;
}
#chat-handle:hover {
	background-color: rgb(0, 128, 192);
}
#chat-box {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 20px;
	width: 350px;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	background-color: white;
	z-index: 9999; /* Bring to front */
}

#chat-header {
	background-color: #3babe2;
	color: white;
	padding: 10px;
	border-radius: 10px 10px 0 0;
}

#chat-body {
	padding: 10px;
	max-height: 400px;
	overflow-y: auto;
}

#name-form {
	display: flex;
	flex-direction: column;
}

#name-input {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
}

#chat-button {
	padding: 10px;
	margin-top: 10px;
	border: none;
	border-radius: 5px;
	background-color: #3babe2;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#chat-button:hover {
	background-color: rgb(0, 128, 192);
	font-weight: bold;
	color: white;
}

#chat-content {
	margin-top: 10px;
}

#message-board {
	max-height: 150px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 10px;
	background-color: rgb(0, 128, 192);
}

#chat-input {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	display: block;
}

.bot-message {
    margin: 10px 0;
    max-width: 90%;
}

.bot-form {
    background: #f8f9fc;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    width: 95%;
}

.bot-form .form-field {
    margin-bottom: 10px;
}

.bot-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.bot-form input,
.bot-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.form-btn-submit {
    background: #3babe2;
    color: #fff;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex: 1;
}

.form-btn-cancel {
    background: #ccc;
    color: #000;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex: 1;
}