/* Public school chat: quiet surfaces, one identity label, stable viewport sizing. */
.ntr-chatbot {
  position:fixed; left:24px; bottom:146px; z-index:9998;
  font-family:"Noto Sans Thai",Tahoma,system-ui,sans-serif; font-size:14px; line-height:1.6;
  --ntr-chatbot-vh:100dvh; --ntr-chatbot-keyboard-offset:0px;
}
.ntr-chatbot *, .ntr-chatbot *::before, .ntr-chatbot *::after { box-sizing:border-box; }
.ntr-chatbot button,.ntr-chatbot textarea { font:inherit; }
.ntr-chatbot button { cursor:pointer; }
.ntr-chatbot__toggle {
  position:relative; display:inline-flex; align-items:center; gap:11px;
  border:0; border-radius:999px; padding:9px 18px 9px 9px; min-height:56px;
  background:linear-gradient(135deg,#1f7a4c,#2f9a63); color:#fff; font-weight:500;
  box-shadow:0 8px 24px #163c2533; animation:ntr-chatbot-float 3.8s ease-in-out infinite;
}
.ntr-chatbot__toggle::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation:ntr-chatbot-pulse 2.8s ease-out infinite;
}
.ntr-chatbot__toggle:hover { background:linear-gradient(135deg,#1b6b42,#278754); }
.ntr-chatbot__toggle-icon {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  background:#ffffff26; font-size:17px;
}
.ntr-chatbot__toggle-icon::after {
  content:''; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
  border:2px solid #1f7a4c; border-radius:50%; background:#7bf0a4;
  animation:ntr-chatbot-online 2.2s ease-in-out infinite;
}
.ntr-chatbot__toggle-text { display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.ntr-chatbot__toggle-title { font-size:14px; font-weight:600; letter-spacing:.01em; }
.ntr-chatbot__toggle-sub { margin-top:2px; font-size:11px; font-weight:400; color:#e0f6e8; }
.ntr-chatbot.has-unread-reply .ntr-chatbot__toggle::after {
  content:attr(data-chatbot-unread-count); position:absolute; top:-5px; right:-4px;
  display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px;
  border:2px solid #fff; border-radius:20px; background:#bd3546; color:#fff; font-size:11px;
}
.ntr-chatbot::after {
  content:attr(data-chatbot-notice-text); position:absolute; bottom:62px; left:0;
  max-width:250px; padding:9px 12px; background:#fff; color:#30513d;
  border:1px solid #e0e7e2; border-radius:10px; box-shadow:0 4px 16px #20382b14;
  font-size:12px; opacity:0; pointer-events:none;
}
.ntr-chatbot.is-reply-notice-visible:not(.is-open)::after { opacity:1; }
/* Other contact launchers must not obscure this chat's composer. */
body:has(.ntr-chatbot.is-open) div.chat-facebook { visibility:hidden; pointer-events:none; }
.ntr-chatbot.is-open .ntr-chatbot__toggle { display:none; }
.ntr-chatbot__panel {
  position:fixed; left:24px; bottom:24px; display:none; flex-direction:column;
  width:380px; max-width:calc(100vw - 48px);
  height:min(560px, calc(var(--ntr-chatbot-vh) - 48px));
  max-height:calc(var(--ntr-chatbot-vh) - 48px); min-height:0;
  overflow:hidden; background:#fff; border:1px solid #8db49c; border-radius:16px;
  box-shadow:0 14px 44px #163e2a38; overscroll-behavior:contain;
}
.ntr-chatbot.is-open .ntr-chatbot__panel { display:flex; }
.ntr-chatbot__header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-shrink:0; padding:13px 16px; background:#edf6ef; color:#17462b; border-bottom:1px solid #bdd6c5;
}
.ntr-chatbot__title { margin:0; font-size:16px; line-height:1.5; font-weight:600; }
.ntr-chatbot__header-actions { display:flex; gap:4px; }
.ntr-chatbot__sound,.ntr-chatbot__close {
  display:grid; place-items:center; width:36px; height:36px; padding:0;
  border:0; border-radius:8px; background:transparent; color:#6d7c72;
}
.ntr-chatbot__sound:hover,.ntr-chatbot__close:hover { background:#f0f5f2; color:#245c3c; }
.ntr-chatbot__sound.is-muted { color:#8b948e; }
.ntr-chatbot__status { padding:7px 16px; font-size:11px; color:#365d44; background:#e3f0e7; flex-shrink:0; }
.ntr-chatbot[data-conversation-state="human"] [data-chatbot-status-text]::before { content:"เจ้าหน้าที่กำลังดูแลบทสนทนานี้"; }
.ntr-chatbot[data-conversation-state="bot"] [data-chatbot-status-text]::before,
.ntr-chatbot:not([data-conversation-state]) [data-chatbot-status-text]::before { content:"ผู้ช่วยตอบอัตโนมัติ"; }
.ntr-chatbot__body {
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; overflow-x:hidden; padding:18px 14px; background:#dcece1;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.ntr-chatbot__message {
  flex-shrink:0; max-width:90%; padding:10px 12px; border-radius:12px;
  font-size:14px; line-height:1.65; white-space:normal; overflow-wrap:anywhere;
}
.ntr-chatbot__message p { margin:0; white-space:pre-line; }
.ntr-chatbot__backlog {
  display:block; margin-top:12px; padding:10px 12px;
  border-left:4px solid #b26a00; border-radius:8px;
  background:#fff6e5; white-space:pre-line;
}
.ntr-chatbot__backlog-title {
  display:inline-block; margin-bottom:6px; padding:3px 9px; border-radius:5px;
  font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.01em;
  background:#8a4b00; color:#ffffff;
}
.ntr-chatbot__backlog-body { display:block; color:#4a3a22; }
.ntr-chatbot__message.is-unread-reply { border-color:#408a5d; box-shadow:inset 3px 0 #408a5d; }
.ntr-chatbot__message.is-unread-reply::after,
.ntr-chatbot__message.is-latest-reply:not(.is-unread-reply)::after {
  content:attr(data-reply-label); display:table; margin-top:7px; padding:2px 7px;
  border-radius:5px; font-size:10px; font-weight:600; line-height:1.5;
  background:#e2f1e7; color:#225d39;
}
.ntr-chatbot__message.is-unread-reply::after { background:#246d44; color:#fff; }
.ntr-chatbot__message--user[data-delivery-status]::after {
  content:attr(data-delivery-status); display:block; margin-top:5px; font-size:10px; color:#edf8f0;
}
.ntr-chatbot__typing { border:1px solid #b9d1c1; }
.ntr-chatbot__typing-label { font-weight:500; color:#305d40; }
.ntr-chatbot__typing--admin .ntr-chatbot__typing-label { color:#3e602f; }
.ntr-chatbot__message--bot { align-self:flex-start; background:#fff; color:#173c27; border:1px solid #b3cfbd; }
.ntr-chatbot__message--admin { align-self:flex-start; background:#f2f8e8; color:#29461e; border:1px solid #b9ce9b; }
.ntr-chatbot__message--user { align-self:flex-end; background:#216c46; color:#fff; border:1px solid #216c46; }
.ntr-chatbot__message-meta { margin-bottom:4px; line-height:1.4; }
.ntr-chatbot__message-label { font-size:10px; color:#647c6b; font-weight:500; }
.ntr-chatbot__message--admin .ntr-chatbot__message-label { color:#4d6b37; }
.ntr-chatbot__message--user .ntr-chatbot__message-meta { display:none; }
.ntr-chatbot__message a { color:#26734a; text-decoration:underline; text-underline-offset:3px; }
.ntr-chatbot__typing {
  flex-shrink:0; align-self:flex-start; display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:10px; background:#fff; color:#6b7e71; font-size:11px;
}
.ntr-chatbot__typing--admin { background:#f2f8e8; color:#3f5f2d; }
.ntr-chatbot__typing-dots { display:flex; gap:4px; }
.ntr-chatbot__typing-dots span { width:5px; height:5px; border-radius:50%; background:#85a28f; animation:ntr-chatbot-dot 1.2s ease-in-out infinite; }
.ntr-chatbot__typing-dots span:nth-child(2) { animation-delay:.15s; }
.ntr-chatbot__typing-dots span:nth-child(3) { animation-delay:.3s; }
.ntr-chatbot__quick-actions { flex-shrink:0; display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px; background:#fff; border-top:1px solid #edf0ee; }
.ntr-chatbot__quick-actions button { flex:1; border:1px solid #e0e7e2; border-radius:7px; background:#fff; color:#557060; padding:7px 8px; font-size:11px; white-space:nowrap; min-height:34px; }
.ntr-chatbot__quick-actions button:hover { background:#f1f6f3; border-color:#b5cebf; }
.ntr-chatbot__form { display:flex; align-items:flex-end; flex-shrink:0; gap:8px; padding:0 12px 8px; background:#fff; margin:0; }
.ntr-chatbot__input { flex:1; min-width:0; resize:none; border:1px solid #dce5df; border-radius:9px; padding:10px 11px; min-height:42px; max-height:110px; font-size:14px; line-height:1.5; background:#fff; color:#293e31; }
.ntr-chatbot__input::placeholder { color:#89968e; }
.ntr-chatbot__input:focus { outline:none; border-color:#69a480; box-shadow:0 0 0 3px #eaf4ee; }
.ntr-chatbot__send { flex-shrink:0; border:0; border-radius:9px; min-width:48px; min-height:43px; padding:9px 12px; background:#247d50; color:#fff; font-size:13px; }
.ntr-chatbot__send:hover { background:#1d6943; }
.ntr-chatbot__send[disabled] { opacity:.55; cursor:wait; }
.ntr-chatbot__privacy { flex-shrink:0; background:#fff; margin:0; padding:0 14px 10px; color:#7e8b83; font-size:10px; line-height:1.5; text-align:center; }
.ntr-chatbot button:focus-visible { outline:3px solid #77b18d; outline-offset:2px; }
@keyframes ntr-chatbot-dot { 0%,80%,100% { opacity:.4; } 40% { opacity:1; } }
@keyframes ntr-chatbot-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes ntr-chatbot-pulse { 0% { box-shadow:0 0 0 0 #ffffff5c; } 70% { box-shadow:0 0 0 16px #ffffff00; } 100% { box-shadow:0 0 0 16px #ffffff00; } }
@keyframes ntr-chatbot-online { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media(max-width:576px) {
 .ntr-chatbot { left:12px; bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
 .ntr-chatbot__toggle { padding:8px 15px 8px 8px; min-height:52px; }
 .ntr-chatbot__toggle-icon { width:36px; height:36px; font-size:16px; }
 .ntr-chatbot__toggle-title { font-size:13.5px; }
 .ntr-chatbot__toggle-sub { font-size:10.5px; }
 .ntr-chatbot__panel {
   left:max(8px,env(safe-area-inset-left,0px)); right:max(8px,env(safe-area-inset-right,0px));
   bottom:max(8px,env(safe-area-inset-bottom,0px)); width:auto; max-width:none;
   height:calc(var(--ntr-chatbot-vh) - 16px); max-height:calc(var(--ntr-chatbot-vh) - 16px); border-radius:14px;
 }
 .ntr-chatbot__input { font-size:16px; }
 .ntr-chatbot__privacy { padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
 .ntr-chatbot.is-mobile-input-active .ntr-chatbot__quick-actions { display:none; }
 body.ntr-chatbot-open div.chat-facebook,body.ntr-chatbot-open div.container-box-footer-line,body.ntr-chatbot-open div#ribbon img { opacity:0; pointer-events:none; }
}
@media(max-height:440px) {
 .ntr-chatbot__status,.ntr-chatbot__privacy { display:none; }
 .ntr-chatbot__header { padding:6px 12px; }
 .ntr-chatbot__quick-actions { padding:6px 12px; }
}
@media(prefers-reduced-motion:reduce) {
 .ntr-chatbot__typing-dots span { animation:none; }
 .ntr-chatbot__toggle, .ntr-chatbot__toggle::before, .ntr-chatbot__toggle-icon::after { animation:none; }
}