@font-face {
	font-family: 'OpenSans';
	/*font-stretch: PERCENTAGE_RANGE_LOW_TO_HIGH; /* Note that font-stretch is a % of normal width */
	font-style: normal;
	font-weight: 400;
	src: url('./OpenSans_normal.ttf') format('truetype');
}

html {
	width: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #F0EFEC;
	font-family: 'OpenSans';
	font-size: 1rem;
}

body * {
	box-sizing: border-box;
	font-family: 'OpenSans';
}

#logo {
	position: relative;
	display: block;
	width: 200px;
	margin: 25px auto;
}

#content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	align-items: stretch;
	width: 90%;
	margin: 0 auto;
}

section {
	position: relative;
	display: block;
	flex: 100%;
	padding: 20px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

#section1 {
	flex: 1 1 0;
	min-width: 0;
}

#section2 {
	flex: 0 0 22%;
	min-width: 200px;
}

#section3 {
	height: 90px;
	justify-items: center;
}




/* CHATBOT - START */

    #section1 .card{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:14px}
    #log{height:56vh;overflow:auto;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background:#fafafa}
    #section1 .msg{margin:10px 0;display:flex;gap:10px}
    #section1 .role{min-width:70px;font-weight:700}
    #section1 .bubble{white-space:pre-wrap;line-height:1.35}
    #section1 .user .role{color:#2563eb}
    #section1 .ai .role{color:#059669}
    #section1 .meta{margin-top:6px;font-size:12px;color:#6b7280}
    #section1 .sources a{color:#111827;text-decoration:underline}
    #section1 .row{display:flex;gap:10px;margin-top:10px}
	#section1 input{
		flex: 1;
		padding: 12px;
		border-radius: 25px;
		border: 1px solid #e5e7eb;
		font-size: 14px;
	}
    #section1 button{padding:12px 14px;border-radius:25px;border:0;background:#111827;color:#fff;font-weight:700;cursor:pointer}
    #section1 button:disabled{opacity:.6;cursor:not-allowed}

    .thinking-spinner{display:inline-flex;gap:5px;align-items:center;padding:4px 0}
    .thinking-spinner span{width:8px;height:8px;border-radius:50%;background:#059669;animation:thinkBounce 1.2s infinite}
    .thinking-spinner span:nth-child(2){animation-delay:.2s}
    .thinking-spinner span:nth-child(3){animation-delay:.4s}
    @keyframes thinkBounce{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:scale(1);opacity:1}}

/* CHATBOT - END */



/* INSTRUCTIONS - START */

#all_books_button {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 15px;
	border: 0;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	background: #3930C8;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

#latest_books {
	border: 1px solid #eee;
	border-radius: 25px;
	padding: 5px 15px;
	font-size: 0.8rem;
}

#latest_books p {
	padding: 0;
	margin: 10px 0;
}

#latest_books a {
	font-size: 1rem;
	color: #3930C8;
}

/* INSTRUCTIONS - END */



@media (max-width: 700px) {
	#content {
		width: 95%;
	}
	#section1, #section2 {
		flex: 100%;
	}
}