/* นวลฉวี Chatbot — creative.co.th v1.2 */
:root{
  --nc-primary:#f4a35a;
  --nc-secondary:#e8834a;
  --nc-chat-bg:#fff9f4;
}

#nuanchawy-widget{position:fixed;bottom:24px;left:24px;z-index:99999;display:flex;flex-direction:column;align-items:flex-start;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}

/* Toggle */
#nuanchawy-toggle{background:linear-gradient(135deg,var(--nc-primary),var(--nc-secondary));border:none;width:60px;height:60px;border-radius:50%;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s,box-shadow .2s;}
#nuanchawy-toggle:hover{transform:scale(1.1);box-shadow:0 8px 26px rgba(0,0,0,.25);}
.nc-online-badge{position:absolute;bottom:3px;right:3px;width:14px;height:14px;background:#4cff91;border-radius:50%;border:2px solid #fff;animation:nc-pulse 1.5s infinite;}
@keyframes nc-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.7;}}

/* Box */
#nuanchawy-box{width:360px;height:540px;background:#fff;border-radius:22px;box-shadow:0 14px 44px rgba(0,0,0,.18);display:none;flex-direction:column;overflow:hidden;animation:nc-slideUp .3s ease;margin-bottom:14px;}
@keyframes nc-slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* Header */
#nuanchawy-header{background:linear-gradient(135deg,var(--nc-primary),var(--nc-secondary));color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.nc-avatar-wrap{position:relative;flex-shrink:0;}
.nc-ears{position:absolute;top:-10px;left:0;right:0;display:flex;justify-content:space-between;padding:0 3px;pointer-events:none;}
.nc-ear{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid #f9d49a;position:relative;}
.nc-ear-inner{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #ffb6b6;opacity:.7;}
.nc-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#fde8c8,#f9d49a);border:3px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;overflow:visible;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.nc-header-info{flex:1;}
.nc-name{font-weight:700;font-size:15px;}
.nc-subtitle{font-size:11px;opacity:.85;font-style:italic;}
.nc-status{font-size:11px;opacity:.9;display:flex;align-items:center;gap:4px;margin-top:2px;}
.nc-dot{width:7px;height:7px;background:#4cff91;border-radius:50%;flex-shrink:0;animation:nc-pulse 1.5s infinite;}
#nuanchawy-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;}
#nuanchawy-close:hover{background:rgba(255,255,255,.4);}

/* Messages */
#nuanchawy-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--nc-chat-bg);}
#nuanchawy-messages::-webkit-scrollbar{width:4px;}
#nuanchawy-messages::-webkit-scrollbar-thumb{background:var(--nc-primary);border-radius:4px;opacity:.5;}
.nc-msg-wrap{display:flex;flex-direction:column;}
.nc-msg-wrap.nc-user{align-items:flex-end;}
.nc-msg-wrap.nc-bot{align-items:flex-start;flex-direction:row;gap:8px;}
.nc-bubble-col{display:flex;flex-direction:column;align-items:flex-start;}
.nc-mini{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#fde8c8,#f9d49a);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;margin-top:2px;border:1.5px solid var(--nc-primary);}
.nc-msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.65;word-break:break-word;}
.nc-user-msg{background:linear-gradient(135deg,var(--nc-primary),var(--nc-secondary));color:#fff;border-bottom-right-radius:4px;white-space:pre-line;}
.nc-bot-msg{background:#fff;color:#444;border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.07);border:1px solid #fde8c8;}
.nc-msg-time{font-size:11px;color:#ccc;margin-top:3px;padding:0 4px;}
.nc-error-msg{background:#fff0f0!important;color:#c0392b!important;border:1px solid #fcc!important;}

/* ── HTML content inside bot messages ── */
.nc-bot-msg a{color:var(--nc-secondary);text-decoration:underline;word-break:break-all;transition:color .15s;}
.nc-bot-msg a:hover{color:var(--nc-primary);}
.nc-bot-msg strong,.nc-bot-msg b{font-weight:600;}
.nc-bot-msg em,.nc-bot-msg i{font-style:italic;}
.nc-bot-msg code{background:#f5f0eb;padding:1px 5px;border-radius:4px;font-size:12px;font-family:'SFMono-Regular',Consolas,monospace;}
.nc-bot-msg pre{background:#f5f0eb;padding:8px 10px;border-radius:8px;overflow-x:auto;font-size:12px;margin:6px 0;font-family:'SFMono-Regular',Consolas,monospace;}
.nc-bot-msg pre code{background:none;padding:0;}
.nc-bot-msg ul,.nc-bot-msg ol{margin:4px 0;padding-left:18px;}
.nc-bot-msg li{margin-bottom:2px;}
.nc-bot-msg blockquote{border-left:3px solid var(--nc-primary);margin:6px 0;padding:4px 10px;color:#888;font-style:italic;}

/* Images in chat */
.nc-bot-msg img,.nc-chat-img{max-width:100%;height:auto;border-radius:10px;margin:6px 0 2px;display:block;cursor:pointer;transition:opacity .15s;}
.nc-bot-msg img:hover{opacity:.85;}

/* Typing */
.nc-typing{display:flex;gap:5px;padding:4px 2px;}
.nc-typing span{width:8px;height:8px;background:var(--nc-primary);border-radius:50%;animation:nc-bounce 1.2s infinite;}
.nc-typing span:nth-child(2){animation-delay:.2s;}
.nc-typing span:nth-child(3){animation-delay:.4s;}
@keyframes nc-bounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-7px);}}

/* Quick replies */
#nuanchawy-quick{padding:8px 10px;display:flex;gap:6px;flex-wrap:wrap;background:var(--nc-chat-bg);border-top:1px solid #fde8c8;}
.nc-quick{background:#fff;border:1.5px solid var(--nc-primary);color:var(--nc-secondary);padding:5px 12px;border-radius:20px;font-size:11.5px;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit;}
.nc-quick:hover{background:var(--nc-primary);color:#fff;}

/* Input */
#nuanchawy-input-area{display:flex;padding:10px 12px;gap:8px;background:#fff;border-top:1px solid #fde8c8;align-items:center;}
#nuanchawy-input{flex:1;padding:10px 15px;border:1.5px solid #fde8c8;border-radius:24px;outline:none;font-size:13px;font-family:inherit;background:var(--nc-chat-bg);transition:border .2s;}
#nuanchawy-input:focus{border-color:var(--nc-primary);background:#fff;}
#nuanchawy-send{background:linear-gradient(135deg,var(--nc-primary),var(--nc-secondary));color:#fff;border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;flex-shrink:0;}
#nuanchawy-send:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.2);}
#nuanchawy-send:disabled{opacity:.5;cursor:not-allowed;transform:none;}

@media(max-width:480px){
  #nuanchawy-box{width:calc(100vw - 32px);height:480px;}
}