:root{
	--bg:#353c47; --panel:#131417; --card:#16181c; --accent:#f0b90b; --muted:#a7b0b8; --line:#252a31; --good:#00d09c; --danger:#ff4d4d;
	--radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root {
  --bg: #eeeeee;
  --card: #ffffff;
  --text: #333333;
  --accent: #6c757d;
  --up: #28a745;
  --down: #dc3545;
  --shadow: rgba(0, 0, 0, 0.1);
}
input, select, button, textarea {
	font-family: 'SolaimanLipi', sans-serif;
	font-size: 14px;
	color: #e7edf3;
}
body {
	color: #fff;
	font-family: 'SolaimanLipi', sans-serif;
	letter-spacing: .1px;
}
.chat-toggle {
	position: fixed;
	right: 18px;
	bottom: 78px;
	z-index: 999;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	background: linear-gradient(135deg,#38bdf8,#3b82f6);
	color: #0b1020;
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	font-size: 22px;
}
.chat-panel {
	position: fixed;
	right: 18px;
	bottom: 148px;
	z-index: 999;
	width: 360px;
	max-height: 80vh;
	display: none;
	background: #1b4262;
	border: 1px solid #1f2937;
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.actions{

	display:flex;gap:10px;margin-top:12px

}
.chat-panel .btn{

	appearance:none;border:1px solid #243041;background:#0b1224;color:#fff;
	padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .05s ease;display:flex;align-items:center;gap:8px

}
.chat-panel .btn:hover{
	background:#0f162a
}
.chat-panel .btn:active{
	transform:translateY(1px)
}
.chat-panel .btn.like.active{
	border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,197,94,.25) inset;color:var(--accent)
}

.chat-header{
	display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #1f2937
}
.chat-body{
	padding:10px 12px;overflow:auto;max-height:35vh
}
.bubble {
	max-width: 78%;
	margin: 6px 0;
	padding: 5px 5px;
	border-radius: 14px;
	background: #0b1224;
	border: 1px solid #243041;
}
.bubble.me {
	margin-left: auto;
	border-color: #2563eb70;
}
.bubble .small{
	font-size:11px;color:var(--muted)
}
.chat-form{
	display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-top:1px solid #1f2937;
}

.input,.textarea{
	width:100%;background:#0b1224;border:1px solid #243041;color:#;border-radius:12px;padding:10px 12px;outline:none
}
@media(max-width:520px){

	.chat-panel{
		right:10px;left:10px;width:auto;bottom:140px
	}
	.chat-toggle {
    	right: 0;
    	bottom: 45px;
    }

}
.auto-question {
	background: #1c5b93;
	margin-bottom: 2px;
	padding: 2px 5px;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
}
.auto-question:hover {
	background: #195386;
	cursor: pointer;
}
/* typing bubble */
.bubble.typing{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}

/* dots */
.typing-dot{
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  opacity: 0.3;
  animation: typingBlink 1.4s infinite ease-in-out;
}

/* delay for each dot */
.typing-dot:nth-child(1){ animation-delay: 0s; }
.typing-dot:nth-child(2){ animation-delay: .2s; }
.typing-dot:nth-child(3){ animation-delay: .4s; }

@keyframes typingBlink{
  0%   { opacity: .3; }
  20%  { opacity: 1; }
  100% { opacity: .3; }
}