/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcraBGwCYdA.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcraaGwCYdA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v5/nKKU-Go6G5tXcr5mOBWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Kanit Medium'), local('Kanit-Medium'), url(https://fonts.gstatic.com/s/kanit/v5/nKKU-Go6G5tXcr5mOBWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Kanit SemiBold'), local('Kanit-SemiBold'), url(https://fonts.gstatic.com/s/kanit/v5/nKKU-Go6G5tXcr5KPxWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Kanit SemiBold'), local('Kanit-SemiBold'), url(https://fonts.gstatic.com/s/kanit/v5/nKKU-Go6G5tXcr5KPxWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Kanit Bold'), local('Kanit-Bold'), url(https://fonts.gstatic.com/s/kanit/v5/nKKU-Go6G5tXcr4uPhWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* thai */
@font-face {
  font-family: 'Kanit-all';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcraBGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit-all';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcraaGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit-all';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcrabGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit-all';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Kanit Regular'), local('Kanit-Regular'), url(https://fonts.gstatic.com/s/kanit/v5/nKKZ-Go6G5tXcraVGwCKd6xB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 * CKEditor 5 (v19.1.1) content styles.
 * Generated on Wed, 03 Jun 2020 05:59:33 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
	--ck-highlight-marker-blue: hsl(201, 97%, 72%);
	--ck-highlight-marker-green: hsl(120, 93%, 68%);
	--ck-highlight-marker-pink: hsl(345, 96%, 73%);
	--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
	--ck-highlight-pen-green: hsl(112, 100%, 27%);
	--ck-highlight-pen-red: hsl(0, 85%, 49%);
	--ck-image-style-spacing: 1.5em;
	--ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-image\theme\imageresize.css */
.ck-content .image.image_resized {
	max-width: 100%;
;
	display: block;
;
	box-sizing: border-box
;
}
/* ckeditor5-image\theme\imageresize.css */
.ck-content .image.image_resized img {
	width: 100%;
;
}
/* ckeditor5-image\theme\imageresize.css */
.ck-content .image.image_resized > figcaption {
	display: block;
;
}
/* ckeditor5-image\theme\imagecaption.css */
.ck-content .image > figcaption {
	display: table-caption;
;
	caption-side: bottom;
;
	word-break: break-word;
;
	color: hsl(0, 0%, 20%);
;
	background-color: hsl(0, 0%, 97%);
;
	padding: .6em;
;
	font-size: .75em;
;
	outline-offset: -1px;
;
}
/* ckeditor5-image\theme\image.css */
.ck-content .image {
	display: table;
;
	clear: both;
;
	text-align: center;
;
	margin: 1em auto
;
}
/* ckeditor5-image\theme\image.css */
.ck-content .image > img {
	display: block;
;
	margin: 0 auto;
;
	max-width: 100%;
;
	min-width: 50px;
;
}
/* ckeditor5-basic-styles\theme\code.css */
.ck-content code {
	background-color: hsla(0, 0%, 78%, 0.3);
;
	padding: .15em;
;
	border-radius: 2px;
;
}
/* ckeditor5-image\theme\imagestyle.css */
.ck-content .image-style-side,
.ck-content .image-style-align-left,
.ck-content .image-style-align-center,
.ck-content .image-style-align-right {
	max-width: 50%;
;
}
/* ckeditor5-image\theme\imagestyle.css */
.ck-content .image-style-side {
	float: right;
;
	margin-left: var(--ck-image-style-spacing);
;
}
/* ckeditor5-image\theme\imagestyle.css */
.ck-content .image-style-align-left {
	float: left;
;
	margin-right: var(--ck-image-style-spacing);
;
}
/* ckeditor5-image\theme\imagestyle.css */
.ck-content .image-style-align-center {
	margin-left: auto;
;
	margin-right: auto;
;
}
/* ckeditor5-image\theme\imagestyle.css */
.ck-content .image-style-align-right {
	float: right;
;
	margin-left: var(--ck-image-style-spacing);
;
}
/* ckeditor5-block-quote\theme\blockquote.css */
.ck-content blockquote {
	overflow: hidden;
;
	padding-right: 1.5em;
;
	padding-left: 1.5em;
;
	margin-left: 0;
;
	margin-right: 0;
;
	font-style: italic;
;
	border-left: solid 5px hsl(0, 0%, 80%);
;
}
/* ckeditor5-block-quote\theme\blockquote.css */
.ck-content[dir="rtl"] blockquote {
	border-left: 0;
;
	border-right: solid 5px hsl(0, 0%, 80%);
;
}
/* ckeditor5-horizontal-line\theme\horizontalline.css */
.ck-content hr {
	border-width: 1px 0 0;
;
	border-style: solid;
;
	border-color: hsl(0, 0%, 37%);
;
	margin: 0;
;
}
/* ckeditor5-table\theme\table.css */
.ck-content .table {
	margin: 1em auto;
;
	display: table
;
}
/* ckeditor5-table\theme\table.css */
.ck-content .table table {
	border-collapse: collapse;
;
	border-spacing: 0;
;
	width: 100%;
;
	height: 100%;
;
	border: 1px double hsl(0, 0%, 70%)
;
}
/* ckeditor5-table\theme\table.css */
.ck-content .table table td,
.ck-content .table table th {
	min-width: 2em;
;
	padding: .4em;
;
	border: 1px solid hsl(0, 0%, 75%);
;
}
/* ckeditor5-table\theme\table.css */
.ck-content .table table th {
	font-weight: bold;
;
	background: hsla(0, 0%, 0%, 5%);
;
}
/* ckeditor5-table\theme\table.css */
.ck-content[dir="rtl"] .table th {
	text-align: right;
;
}
/* ckeditor5-table\theme\table.css */
.ck-content[dir="ltr"] .table th {
	text-align: left;
;
}
/* ckeditor5-media-embed\theme\mediaembed.css */
.ck-content .media {
	clear: both;
;
	margin: 1em 0;
;
	display: block;
;
	min-width: 15em;
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list {
	list-style: none
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list li {
	margin-bottom: 5px
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list li .todo-list {
	margin-top: 5px;
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label > input {
	-webkit-appearance: none;
;
	display: inline-block;
;
	position: relative;
;
	width: var(--ck-todo-list-checkmark-size);
;
	height: var(--ck-todo-list-checkmark-size);
;
	vertical-align: middle;
;
	border: 0;
;
	left: -25px;
;
	margin-right: -15px;
;
	right: 0;
;
	margin-left: 0
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
	display: block;
;
	position: absolute;
;
	box-sizing: border-box;
;
	content: '';
;
	width: 100%;
;
	height: 100%;
;
	border: 1px solid hsl(0, 0%, 20%);
;
	border-radius: 2px;
;
	transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
	display: block;
;
	position: absolute;
;
	box-sizing: content-box;
;
	pointer-events: none;
;
	content: '';
;
	left: calc( var(--ck-todo-list-checkmark-size) / 3 );
;
	top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
;
	width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
;
	height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
;
	border-style: solid;
;
	border-color: transparent;
;
	border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
;
	transform: rotate(45deg);
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
	background: hsl(126, 64%, 41%);
;
	border-color: hsl(126, 64%, 41%);
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
	border-color: hsl(0, 0%, 100%);
;
}
/* ckeditor5-list\theme\todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
	vertical-align: middle;
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .marker-yellow {
	background-color: var(--ck-highlight-marker-yellow);
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .marker-green {
	background-color: var(--ck-highlight-marker-green);
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .marker-pink {
	background-color: var(--ck-highlight-marker-pink);
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .marker-blue {
	background-color: var(--ck-highlight-marker-blue);
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .pen-red {
	color: var(--ck-highlight-pen-red);
;
	background-color: transparent;
;
}
/* ckeditor5-highlight\theme\highlight.css */
.ck-content .pen-green {
	color: var(--ck-highlight-pen-green);
;
	background-color: transparent;
;
}
/* ckeditor5-page-break\theme\pagebreak.css */
.ck-content .page-break {
	position: relative;
;
	clear: both;
;
	padding: 5px 0;
;
	display: flex;
;
	align-items: center;
;
	justify-content: center
;
}
/* ckeditor5-page-break\theme\pagebreak.css */
.ck-content .page-break::after {
	content: '';
;
	position: absolute;
;
	border-bottom: 2px dashed hsl(0, 0%, 77%);
;
	width: 100%;
;
}
/* ckeditor5-page-break\theme\pagebreak.css */
.ck-content .page-break__label {
	position: relative;
;
	z-index: 1;
;
	padding: .3em .6em;
;
	display: block;
;
	text-transform: uppercase;
;
	border: 1px solid hsl(0, 0%, 77%);
;
	border-radius: 2px;
;
	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
;
	font-size: 0.75em;
;
	font-weight: bold;
;
	color: hsl(0, 0%, 20%);
;
	background: hsl(0, 0%, 100%);
;
	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
;
	-webkit-user-select: none;
;
	-moz-user-select: none;
;
	-ms-user-select: none;
;
	user-select: none;
;
}
/* ckeditor5-font\theme\fontsize.css */
.ck-content .text-tiny {
	font-size: .7em;
;
}
/* ckeditor5-font\theme\fontsize.css */
.ck-content .text-small {
	font-size: .85em;
;
}
/* ckeditor5-font\theme\fontsize.css */
.ck-content .text-big {
	font-size: 1.4em;
;
}
/* ckeditor5-font\theme\fontsize.css */
.ck-content .text-huge {
	font-size: 1.8em;
;
}
/* ckeditor5-code-block\theme\codeblock.css */
.ck-content pre {
	padding: 1em;
;
	color: hsl(0, 0%, 20.8%);
;
	background: hsla(0, 0%, 78%, 0.3);
;
	border: 1px solid hsl(0, 0%, 77%);
;
	border-radius: 2px;
;
	text-align: left;
;
	direction: ltr;
;
	tab-size: 4;
;
	white-space: pre-wrap;
;
	font-style: normal;
;
	min-width: 200px
;
}
/* ckeditor5-code-block\theme\codeblock.css */
.ck-content pre code {
	background: unset;
;
	padding: 0;
;
	border-radius: 0;
;
}
@media print {
	/* ckeditor5-page-break\theme\pagebreak.css */
	.ck-content .page-break {
		padding: 0
;
	}
	/* ckeditor5-page-break\theme\pagebreak.css */
	.ck-content .page-break::after {
		display: none;
;
	}
}
/* CSS Variables from SCSS */
:root {
  --gray250: rgb(250,250,250);
  --gray240: rgb(240,240,240);
  --gray230: rgb(230,230,230);
  --gray220: rgb(220,220,220);
  --gray210: rgb(210,210,210);
  --gray200: rgb(200,200,200);
  --gray180: rgb(180,180,180);
  --gray150: rgb(150,150,150);
  --gray120: rgb(120,120,120);
  --gray90: rgb(90,90,90);
  --gray60: rgb(60,60,60);
  --gray50: rgb(50,50,50);
  --gray40: rgb(40,40,40);
  --gray30: rgb(30,30,30);
  
  --purple: rgb(171,71,188);
  --darkPurple: rgb(74,20,140);
  --blue: rgb(3,169,244);
  --darkBlue: rgb(26,35,126);
  --lightGreen: rgb(205,220,57);
  --green: rgb(76,175,80);
  --darkGreen: rgb(46,125,50);
  --red: rgb(211,47,47);
  --darkRed: rgb(183,28,28);
  --orange: rgb(255,111,0);
  --darkOrange: rgb(216,67,21);
  --yellow: rgb(251,192,45);
  --darkYellow: rgb(249,168,37);
  
  --shadow1: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  --shadow2: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
  --shadow3: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px;
  
  /* Pink theme for Aanjung */
  --pink: rgb(250, 248, 249);
  --darkPink: rgb(255, 102, 170);
  
  --chula-pink: #E83784;
  --chula-soft-pink: #FDEEF4;
  --chula-bg: #F5F5F5;
  --chula-white: #FFFFFF;
  --chula-gray: #A88484;
}

/* รีเซ็ตเบื้องต้น */
#chula-chatbot-wrapper,
.chula-header,
.header-left,
.chula-bot-logo,
.bot-name,
.chula-messages,
.bubble,
.bubble.bot,
.bubble.user,
.bubble .avatar.bot-avatar,
.bubble .avatar.user-avatar,
.bubble.bot .text,
.bubble.user .text,
.bubble.typing .text,
.system-label,
.chula-input-row,
.chula-input-row input,
.chula-input-row input:focus,
.chula-input-row input::placeholder,
.chula-input-row .send-btn,
.chula-input-row .send-btn:disabled,
.chula-input-row .send-btn:hover:not(:disabled),
.chula-input-row .send-btn svg,
#chula-chatbot-toggle,
#chula-chatbot-toggle:hover,
#chula-chatbot-toggle img,
#chula-chatbot-box {
  box-sizing: border-box;
  font-family: 'Kanit', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ปุ่มลอย  <--- ตกแต่งปุ่มลอย */
#chula-chatbot-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, #e675a2 0%, #ffb8dc 100%);
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(232, 55, 132, 0.10), 0 0 0 0 #fdeef4;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: box-shadow 0.18s, transform 0.18s;
  animation: pulse-ring 2.2s infinite cubic-bezier(0.66,0,0,1);
}

#chula-chatbot-toggle:hover {
  box-shadow: 0 8px 28px rgba(232, 55, 132, 0.18), 0 0 0 8px #fdeef4;
  transform: translateY(-2px) scale(1.08);
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 #fdeef4, 0 4px 18px rgba(232, 55, 132, 0.10);}
  70% { box-shadow: 0 0 0 12px rgba(253,238,244,0.3), 0 4px 18px rgba(232, 55, 132, 0.10);}
  100% { box-shadow: 0 0 0 0 #fdeef4, 0 4px 18px rgba(232, 55, 132, 0.10);}
}

#chula-chatbot-toggle img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  filter: drop-shadow(0 1px 4px #fdeef4);
  transition: filter 0.2s;
}

#chula-chatbot-toggle:hover img {
  filter: drop-shadow(0 2px 8px #e83784);
}

/* กล่องแชท */
#chula-chatbot-box {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 370px;
  height: 480px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid #fdeef4;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(232, 55, 132, 0.10);
  overflow: hidden;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  animation: fadeInChat 0.28s ease;
}

/* Header */
.chula-header {
  background: linear-gradient(90deg, #fd006e 0%, #f78a31 100%);
  padding: 10px 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  font-family: 'Sarabun', 'Inter', 'Kanit', 'Roboto', sans-serif;
  min-height: 44px;
  position: relative;
  box-shadow: 0 2px 8px rgba(232,55,132,0.06);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.chula-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #fdeef4 0%, #e83784 100%);
  opacity: 0.18;
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chula-bot-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px #fdeef4;
  transition: box-shadow 0.2s;
}

.chula-header:hover .chula-bot-logo {
  box-shadow: 0 4px 16px #e83784;
}

.bot-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px #fdeef4;
}

.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.3em;
  cursor: pointer;
  padding: 0 6px;
  margin-left: 8px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.18s;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: #fdeef4;
  color: #e83784;
  opacity: 1;
}

/* Messages */
.chula-messages {
  flex: 1;
  padding: 16px 14px 10px 14px;
  overflow-y: auto;
  background: var(--chula-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chula-messages .bubble {
  animation: fadeInBubble 0.35s;
}

@keyframes fadeInBubble {
  from { opacity: 0; transform: translateY(10px) scale(0.98);}
  to { opacity: 1; transform: translateY(0) scale(1);}
}

.chula-messages::-webkit-scrollbar {
  width: 4px;
}

.chula-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #fdeef4 0%, #e83784 100%);
  border-radius: 4px;
}

/* Bubble */
.bubble {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 0;
}

.bubble.bot {
  align-self: flex-start;
  flex-direction: row;
}

.bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.bubble .avatar.bot-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  align-self: flex-end;
}

.bubble .avatar.user-avatar { display: none !important; }

.bubble.bot .text {
  background: linear-gradient(120deg, #fff 80%, #fdeef4 100%);
  color: #3d1e24;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: 10px 15px;
  border-radius: 13px;
  font-size: 0.98em;
  font-weight: 400;
  max-width: 220px;
  position: relative;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 18px;
  border-top-left-radius: 13px;
  border-bottom-right-radius: 13px;
}

.bubble.bot .text::before {
  content: "";
  position: absolute;
  left: -8px; top: 16px;
  width: 10px; height: 10px;
  background: #fdeef4;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}

.bubble.user .text {
  background: linear-gradient(120deg, #fdeef4 80%, #fff 100%);
  color: #E83784;
  border: none;
  box-shadow: 0 1px 4px rgba(232,55,132,0.03);
  padding: 10px 15px;
  border-radius: 13px;
  font-size: 0.98em;
  font-weight: 500;
  max-width: 220px;
  position: relative;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 18px;
  border-top-right-radius: 13px;
  border-bottom-left-radius: 13px;
}

.bubble.user .text::before {
  content: "";
  position: absolute;
  right: -8px; top: 16px;
  width: 10px; height: 10px;
  background: #fdeef4;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
}

.bubble.typing .text {
  background: #f9f6f3;
  border: 1px dashed #fdeef4;
  color: #e83784;
  font-style: italic;
  opacity: 0.7;
  padding: 8px 13px;
  min-width: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.92em;
}

/* System Label (Error) */
.system-label {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e83784;
  font-size: 0.95em;
  background: #fdeef4;
  border: 1px solid #e83784;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 8px auto 4px auto;
  font-family: 'Sarabun', 'Inter', 'Kanit', 'Roboto', sans-serif;
  letter-spacing: 0.01em;
  animation: fadeInBubble 0.3s;
}

/* Input Row */
.chula-input-row {
  padding: 10px 13px 12px 13px;
  background: linear-gradient(90deg, #fff 80%, #fdeef4 100%);
  border-top: 1.5px solid #fdeef4;
  display: flex;
  gap: 7px;
  align-items: center;
}

.chula-input-row input {
  flex: 1;
  border: 1.5px solid #fdeef4;
  border-radius: 16px;
  padding: 9px 13px;
  font-size: 1em;
  outline: none;
  background: #fff;
  color: #e83784;
  font-weight: 500;
  transition: border 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(232,55,132,0.02);
}

.chula-input-row input:focus {
  background: #fff;
  border: 1.5px solid #e83784;
  box-shadow: 0 0 0 2px #fdeef4;
}

.chula-input-row input::placeholder {
  color: #e1a8c7;
  opacity: 1;
}

.chula-input-row .send-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid #fdeef4;
  border-radius: 50%;
  background: linear-gradient(135deg, #fdeef4 0%, #fff 100%);
  color: #e83784;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(232,55,132,0.10);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  padding: 0;
}

.chula-input-row .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f7f7fa;
  color: #e1a8c7;
  border: 1.5px solid #f7f7fa;
}

.chula-input-row .send-btn:hover:not(:disabled) {
  background: #e83784;
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,55,132,0.18);
  border: 1.5px solid #e83784;
}

.chula-input-row .send-btn svg {
  display: block;
  transition: filter 0.18s;
}

.chula-input-row .send-btn:hover:not(:disabled) svg {
  filter: drop-shadow(0 2px 6px #fdeef4);
}

/* Edge hit-area: บริเวณขอบขวาของหน้าจอที่มองไม่เห็น แต่จับ hover ได้ */
#chula-chatbot-edge {
  position: fixed;
  top: 0;
  right: 0;
  width: 12px; /* ขนาดพื้นที่สำหรับแตะขอบหน้าจอ */
  height: 100vh;
  background: transparent;
  z-index: 9999;
  cursor: pointer;
}

/* ปรับพฤติกรรมของปุ่มเมื่อปิด: ให้หลบออกนอกหน้าจอโดยใช้ translateX */
#chula-chatbot-toggle {
  /* ...existing styles... */
  /* ให้ปุ่มหลบออกไปข้างนอก (default hidden) */
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, opacity 0.2s;
}

/* เมื่อเอาเมาส์ไปแตะแถบ edge ให้ปุ่มสไลด์เข้ามา */
#chula-chatbot-edge:hover + #chula-chatbot-toggle,
#chula-chatbot-toggle:hover {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ให้ toggle อยู่สูงกว่า edge เมื่อแสดง */
#chula-chatbot-toggle {
  z-index: 10000;
}

/* Mobile: ถ้าหน้าจอเล็ก ให้ขยายพื้นที่ edge และแสดงปุ่มแทน (เพื่อลดปัญหาแตะไม่ได้) */
@media (max-width: 768px) {
  /* ให้พื้นที่ edge แตะง่ายขึ้นบนมือถือ แต่ซ่อน toggle ให้ออกไปข้างนอกเหมือนบนเดสก์ท็อป */
  #chula-chatbot-edge {
    width: 36px; /* ให้แตะง่ายขึ้นบนมือถือ */
  }

  /* บังคับให้ toggle หลบออกนอกหน้าจอบนมือถือ (จะไม่โผล่อัตโนมัติ) */
  #chula-chatbot-toggle {
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    right: 8px;
    bottom: 8px;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, opacity 0.2s;
    z-index: 10000;
  }

  /* ขนาดกล่องแชท และบับเบิล ให้เข้ากับหน้าจอมือถือ */
  #chula-chatbot-box {
    width: calc(100vw - 12px);
    height: calc(100vh - 80px);
    right: 6px;
    bottom: 60px;
  }

  .bubble .text {
    max-width: 160px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #chula-chatbot-box {
    width: calc(100vw - 12px);
    height: calc(100vh - 80px);
    right: 6px;
    bottom: 60px;
  }
  #chula-chatbot-toggle {
    right: 8px;
    bottom: 8px;
  }
  .bubble .text {
    max-width: 160px;
  }
}

/* Animations */
@keyframes fadeInChat {
  from { opacity: 0; transform: translateY(10px);}
  to { opacity: 1; transform: translateY(0);}
}