:root { --chat-green:#087a55; --chat-deep:#063f35; --chat-mint:#e8f7f1; --chat-line:#cfe3db; }
* { box-sizing:border-box; }
body.chatbot-page { margin:0; min-height:100vh; color:#15352f; background:radial-gradient(circle at 12% 10%,#dff5eb,transparent 32%),#f5faf8; font-family:"Kanit","Noto Sans Thai","Leelawadee UI",sans-serif; }
.chatbot-header { position:sticky; z-index:30; }
.chatbot-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.chatbot-brand span:last-child { display:grid; }
.chatbot-brand img { object-fit:cover; object-position:center; }
.chatbot-nav { display:flex; align-items:center; gap:8px; }
.chatbot-shell { width:min(1120px,calc(100% - 28px)); margin:30px auto; display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:24px; }
.chatbot-intro { padding:28px; border:1px solid var(--chat-line); border-radius:24px; background:linear-gradient(155deg,#063f35,#087a55); color:#fff; box-shadow:0 22px 55px #063f3525; }
.chatbot-hero-logo { display:block; width:132px; aspect-ratio:1; margin:0 auto 22px; border:3px solid rgba(255,255,255,.76); border-radius:28px; object-fit:cover; box-shadow:0 18px 38px rgba(0,0,0,.3); }
.chatbot-intro h1 { margin:8px 0; font-size:clamp(34px,5vw,54px); }
.chatbot-intro p { line-height:1.7; }
.chatbot-intro .eyebrow { color:#baf3d8; font-size:12px; font-weight:900; letter-spacing:.13em; }
.chatbot-suggestions { display:grid; gap:9px; margin-top:26px; }
.chatbot-suggestions button { padding:12px; border:1px solid #ffffff35; border-radius:12px; background:#ffffff12; color:#fff; text-align:left; font:inherit; cursor:pointer; }
.chatbot-suggestions button:hover { background:#ffffff22; }
.chatbot-panel-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid #dbe9e3; color:#61746c; font-size:.82rem; }
.chatbot-panel-tools button { border:1px solid #b9d8cb; border-radius:999px; background:#fff; color:var(--chat-green); padding:7px 12px; font:inherit; font-weight:700; cursor:pointer; }
.chatbot-panel-tools button:hover { background:#edf8f3; }
.chatbot-panel { min-height:680px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--chat-line); border-radius:24px; background:#fff; box-shadow:0 22px 55px #063f3518; }
.chatbot-messages { flex:1; display:flex; flex-direction:column; gap:16px; padding:24px; overflow:auto; }
.chat-message { max-width:86%; padding:14px 16px; border-radius:17px; line-height:1.7; white-space:pre-wrap; }
.chat-message.user { align-self:flex-end; border-bottom-right-radius:4px; background:var(--chat-green); color:#fff; }
.chat-message.assistant { align-self:flex-start; border-bottom-left-radius:4px; background:#edf7f3; color:#173d34; }
.chat-message.loading { opacity:.7; }
.chat-sources { display:grid; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid #cfe3db; font-size:12px; }
.chat-source { padding:7px 9px; border-radius:8px; background:#fff; color:#506d66; }
.chatbot-composer { display:grid; grid-template-columns:1fr auto; gap:10px; padding:16px; border-top:1px solid var(--chat-line); background:#f8fbfa; }
.chatbot-composer textarea { resize:none; min-height:54px; padding:14px; border:1px solid #bcd5cc; border-radius:14px; font:inherit; outline:none; }
.chatbot-composer textarea:focus { border-color:var(--chat-green); box-shadow:0 0 0 3px #087a5518; }
.chatbot-composer button { min-width:86px; border:0; border-radius:14px; background:var(--chat-green); color:#fff; font-weight:900; cursor:pointer; }
.chatbot-composer button:disabled { opacity:.55; cursor:wait; }
.chatbot-disclaimer { margin:0; padding:0 18px 14px; color:#6b817b; font-size:11px; }
@media (max-width:760px) { .chatbot-nav a:not(:first-child){display:none}.chatbot-shell{grid-template-columns:1fr;margin:14px auto}.chatbot-intro{padding:20px}.chatbot-panel{min-height:65vh}.chat-message{max-width:94%} }
.admin-chatbot-shell { width:min(1180px,calc(100% - 32px)); margin:24px auto 60px; display:grid; gap:20px; }
.admin-chatbot-shell textarea { width:100%; resize:vertical; }