/* General reset */
.felipa-regular {
  font-family: "Felipa", serif;
  font-weight: 400;
  font-style: normal;
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}

/* Body and container */
body {
	margin:0;
	font-family:"Comic Sans MS";
	background:var(--bg-color,#05070F);
	color:var(--text-color,#E6F2FF);
}
.layout {
	display:flex;
	height:100vh;
}
.sidebar {
	width:260px;
	background:var(--sidebar-bg,#0B1220);
	padding:20px;
	display:flex;
	flex-direction:column;
}
#history {
	flex:1;
	margin-top:20px;
}

.history-item{
	padding:10px 12px;
	border-radius:8px;
	margin-bottom:8px;
	cursor:pointer;
	color:#cfeeff;
}
.history-item.active{
	background:#0F1B2D;
	color:white;
}

.sidebar-bottom {
	margin-top:auto;
	display:flex;
	flex-direction:column;
	gap:8px;
}

.sidebar-bottom button {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.06);
	padding:10px 12px;
	border-radius:8px;
	color:#cfeeff;
	text-align:left;
	cursor:pointer;
}
.sidebar-bottom button:hover{
	background: rgba(255,255,255,0.02);
}
.container {
	max-width:600px;
	margin:50px auto;
	padding:20px;
	background:#1e1e1e;
	border-radius:12px;
	box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.chat-area{
	flex:1;
	display:flex;
	flex-direction:column;
}
.input-area{
	display:flex;
	gap:10px;
	padding:12px;
	background:#0B1220;
	position:sticky;
	bottom:0;
	align-items:center;
	border-top:1px solid rgba(255,255,255,0.03);
}
.new-chat {
	padding:10px;
	border-radius:10px;
	border:none;
	background:#1E90FF;
	color:white;
	cursor:pointer;
	width:100%;
	margin-top:10px;
}
/* Input fields */
textarea {
	flex:1 1 auto;
	resize:none;
	height:48px;
	padding:10px 12px;
	border-radius:10px;
	border:none;
	background:var(--input-bg,#0B1220);
	color:var(--input-color,white);
	width:auto;
	min-width:0; /* allow flex to shrink on small screens */
}
input[type=text], input[type=password] {
	width:100%;
	padding:12px 15px;
	margin:8px 0;
	border:none;
	border-radius:8px;
	background:#2b2b2b; 
	color:white;
}

button {
	padding:10px 14px;
	margin-top:8px;
	border:none;
	border-radius:8px;
	background:#1E90FF;
	color:white;
	font-weight:600;
	cursor:pointer;
	transition:0.18s ease;
}

button:hover {
	background:#357ac8;
}
.send-btn {
	padding:10px 18px;
	border-radius:10px;
	background:#1E90FF;
	border:none;
	color:white;
	cursor:pointer;
	transition:0.18s ease;
	flex:0 0 auto; /* don't stretch */
}
/* Chat styling */
#chat {
	flex:1 1 auto;
	padding:30px;
	overflow-y:auto;
}

/* row that contains a single message; allows alignment while keeping message shrink-to-content */
.message-row{
	display:flex;
	width:100%;
	margin-bottom:12px;
}
.message-row.user{
	justify-content:flex-end;
}
.message-row.ai{
	justify-content:flex-start;
}

.message {
	display:inline-block;       /* shrink to content */
	padding:12px;
	border-radius:12px;
	max-width:75%;
	white-space:pre-wrap;       /* preserve spaces and wrap */
	overflow-wrap:break-word;
}

.message-row.user .message{
	background:var(--user-msg,#1E90FF);
	margin-right:6px;
}

.message-row.ai .message{
	background:var(--ai-msg,#0F1B2D);
	margin-left:6px;
}

/* Theme classes */
.theme-dark {
	--bg-color: #05070F;
	--text-color: #E6F2FF;
	--sidebar-bg: #0B1220;
	--input-bg: #0B1220;
	--input-color: #FFFFFF;
	--user-msg: #1E90FF;
	--ai-msg: #0F1B2D;
}

.theme-light {
	/* chosen palette from provided options for clear visible blues */
	--bg-color: #D7F3FF; /* page background */
	--text-color: #0F1724; /* dark text */
	--sidebar-bg: #D0F0FD; /* sidebar */
	--input-bg: #FFFFFF; /* chat input area */
	--input-color: #0F1724;
	--user-msg: #CCE7FF; /* user bubble */
	--ai-msg: #D6ECFF; /* ai bubble */
	--chat-panel-bg: #E0FFFF; /* behind chat area */
}

/* ensure the input area uses a theme aware background */
.input-area{
	background:var(--input-bg,#0B1220);
}

.theme-light .sidebar-bottom button{
	background: #CCEFFF;
	color: #0F1724;
	border: 1px solid rgba(15,23,36,0.06);
}

/* Typing animation */
.typing {
    display:inline-block;
    border-right:3px solid white;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    to { border-color: transparent; }
}