.askly-chat-widget {
	font-family: Arial, Helvetica, sans-serif;
}

/* An khung tieu de/border mac dinh cua Liferay quanh portlet (header.portlet-topper
   voi icon+title "Trợ lý ảo Askly") - portlet nay duoc chen tu dong vao MOI trang qua
   layout.static.portlets.all nen khong co cho de tat "Show Borders" qua UI Configuration
   nhu DmsChat (dat tay, co preference rieng trong DB). Dung dung css-class-wrapper
   "askly-chat-portlet" da khai bao san trong liferay-portlet.xml de nham dung phan tu
   can an, khong anh huong portlet khac. */
.askly-chat-portlet .portlet-topper {
	display: none !important;
}

.askly-chat-portlet .portlet-content {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-height: 0 !important;
}

/* Chua khoang trong cuoi trang bang dung chieu cao thanh dock, tranh thanh dock fixed
   de len noi dung cuoi trang - dung cung so do nhu chat-portlet goc (css/main.css:
   "html body { padding-bottom: 24px; }" cho .chat-bar cao 24px). */
html body {
	padding-bottom: 24px;
}

/* layout.static.portlets.all chen portlet ra SAU toan bo layout template da
   dung xong (xem html/portal/layout/view/common.jspf cua Liferay), tuc la RA
   NGOAI cot/khoi Footer that cua theme - khac voi DmsChat (duoc gan tay dung
   vao cot Footer). Vi vay KHONG the dua vao vi tri DOM ma no duoc chen vao de
   tao hieu ung "thanh Footer" - phai dung position:fixed neo day VIEWPORT thi
   moi luon dung vi tri bat ke Liferay chen no vao dau trong trang. Mau sac/kich
   thuoc copy dung theo chat-portlet goc (chat-portlet/css/main.css: .chat-bar)
   thay cho thanh xanh to truoc day, de dong bo giao dien voi thanh chat co san. */
.askly-chat-dockbar {
	position: fixed;
	left: 15px;
	right: 15px;
	bottom: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	background: #e5e5e5;
	background: linear-gradient(to bottom, #f5f5f5 0%, #e5e5e5 50%, #d9d9d9 100%);
	border: 1px solid #b5b5b5;
	border-bottom-width: 0;
	color: #111;
	cursor: pointer;
	padding: 0 10px;
	font: bold 11px/24px Tahoma, Geneva, sans-serif;
	text-align: left;
	text-shadow: 1px 1px #fff;
	border-radius: 0;
	box-shadow: none;
}

.askly-chat-dockbar:hover {
	background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
}

.askly-chat-dockbar-icon {
	font-size: 13px;
	line-height: 24px;
	pointer-events: none;
}

.askly-chat-dockbar-label {
	line-height: 24px;
	pointer-events: none;
}

/* Panel hoi thoai van noi de (position:fixed) khi mo, neo canh phai trung mep phai
   thanh dock (right: 15px), nam ngay tren thanh dock (bottom: 30px = 24px cao dock
   + khoang cach). */
.askly-chat-panel {
	position: fixed;
	right: 15px;
	bottom: 30px;
	z-index: 99999;
	width: 340px;
	max-width: calc(100vw - 32px);
	height: 460px;
	max-height: calc(100vh - 140px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.3);
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.askly-chat-panel--open {
	display: flex;
}

.askly-chat-header {
	background: #1e6bb8;
	color: #fff;
	padding: 12px 14px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.askly-chat-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.askly-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	background: #f4f6f8;
}

.askly-chat-msg {
	margin-bottom: 10px;
	display: flex;
}

.askly-chat-msg--user {
	justify-content: flex-end;
}

.askly-chat-bubble {
	display: inline-block;
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	word-wrap: break-word;
	white-space: normal;
}

.askly-chat-msg--bot .askly-chat-bubble {
	background: #fff;
	border: 1px solid #e0e0e0;
	color: #333;
	border-bottom-left-radius: 2px;
}

.askly-chat-msg--user .askly-chat-bubble {
	background: #1e6bb8;
	color: #fff;
	border-bottom-right-radius: 2px;
}

.askly-chat-msg--error .askly-chat-bubble {
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #b02a37;
}

.askly-chat-msg--typing .askly-chat-bubble {
	color: #888;
	font-style: italic;
}

.askly-chat-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 4px;
	vertical-align: middle;
}

.askly-chat-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #888;
	animation: asklyTypingBounce 1.4s infinite ease-in-out both;
}

.askly-chat-typing-dots span:nth-child(1) {
	animation-delay: 0s;
}

.askly-chat-typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.askly-chat-typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes asklyTypingBounce {
	0%, 80%, 100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.askly-chat-bubble a {
	color: #1e6bb8;
	word-break: break-all;
}

.askly-chat-msg--user .askly-chat-bubble a {
	color: #fff;
	text-decoration: underline;
}

.askly-chat-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #e0e0e0;
	background: #fff;
}

.askly-chat-input {
	flex: 1;
	resize: none;
	/* Bat buoc de JS (autoResizeInput trong view.jsp) tinh max-height dung: voi border-box,
	   max-height bao gom ca padding+border nen JS chi can cong them do day border. Neu de
	   content-box (mac dinh), max-height chi tinh rieng phan noi dung, JS van tu bu tru dung -
	   nhung khai bao thang o day giup tranh phu thuoc reset CSS toan site co the doi box-sizing. */
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 16px;
	padding: 8px 12px;
	font-size: 13px;
	/* 18px qua sat lam dau tieng Viet (o, ơ, ệ...) bi cat mat phan tren khi o cuon - can du
	   khoang trong tren/duoi glyph cho dau. */
	line-height: 22px;
	/* Gia tri fallback phong khi JS chua kip chay - JS se ghi de bang max-height tinh dong dua
	   tren line-height/padding/border THUC TE doc qua getComputedStyle (xem autoResizeInput() /
	   computeInputSizingOnce() trong view.jsp). Hardcode tay o day tung bi lech vai px so voi
	   clientHeight that (do content-box vs border-box, do border 1px chua tru...) lam diem cuon
	   cat khong dung ranh gioi dong, lam lo mot phan dau tieng Viet - nen KHONG tinh tay nua. */
	/* 4 dong (khop INPUT_VISIBLE_LINES trong view.jsp): 4*22 + padding-bottom 8 + border 2. */
	max-height: 98px;
	overflow-y: hidden;
	font-family: inherit;
}

.askly-chat-send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: #1e6bb8;
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
}

.askly-chat-send:disabled {
	opacity: 0.6;
	cursor: default;
}

.askly-chat-send:hover:not(:disabled) {
	background: #185a99;
}