:root {
--nac-accent:     #1a5c3a;
--nac-accent-dk:  #134429;
--nac-text:       #1a1a1a;
--nac-text-light: #6b7280;
--nac-bg:         #ffffff;
--nac-bubble-ai:  #f3f4f6;
--nac-radius:     0;
--nac-shadow:     -4px 0 24px rgba(0,0,0,.12);
--nac-font:       'Segoe UI', system-ui, sans-serif;
--nac-z:          99999;
--nac-drawer-w:   380px;
} #nac-trigger-wrap {
position:       fixed;
bottom:         var(--nac-pos-bottom, 24px);
right:          var(--nac-pos-right, 24px);
left:           var(--nac-pos-left, auto);
z-index:        var(--nac-z);
display:        flex;
flex-direction: column;
align-items:    var(--nac-align, flex-end);
gap:            8px;
}
#nac-trigger {
width:           56px;
height:          56px;
border-radius:   50%;
background:      var(--nac-accent);
color:           #fff;
border:          none;
cursor:          pointer;
box-shadow:      0 4px 16px rgba(0,0,0,.2);
display:         flex;
align-items:     center;
justify-content: center;
transition:      transform .2s, background .2s;
font-size:       22px;
flex-shrink:     0;
}
#nac-trigger:hover { background: var(--nac-accent-dk); transform: scale(1.08); } #nac-bubble {
display:       none;
background:    #fff;
border:        1px solid #e5e7eb;
border-radius: 12px;
padding:       10px 32px 10px 12px;
font-size:     13.5px;
font-family:   var(--nac-font);
color:         var(--nac-text);
box-shadow:    0 4px 16px rgba(0,0,0,.12);
max-width:     220px;
line-height:   1.4;
position:      relative;
}
#nac-bubble.nac-bubble-visible {
display: block;
animation: nacFadeIn .3s ease;
}
#nac-bubble::after {
content:      '';
position:     absolute;
bottom:       -8px;
right:        var(--nac-bubble-arrow-right, 20px);
left:         var(--nac-bubble-arrow-left, auto);
width:        0; height: 0;
border-left:  8px solid transparent;
border-right: 8px solid transparent;
border-top:   8px solid #fff;
filter:       drop-shadow(0 1px 1px rgba(0,0,0,.1));
}
#nac-bubble-close {
position:  absolute;
top:       6px; right: 8px;
font-size: 13px;
color:     #9ca3af;
cursor:    pointer;
padding:   2px 4px;
}
#nac-bubble-close:hover { color: var(--nac-text); } #nac-overlay {
display:    none;
position:   fixed;
top:        0;
left:       0;
right:      0;
bottom:     0;
background: rgba(0,0,0,.3);
z-index:    calc(var(--nac-z) - 1);
transition: opacity .25s;
opacity:    0;
-webkit-tap-highlight-color: transparent;
}
#nac-overlay.nac-overlay-visible {
display: block;
opacity: 1;
} #nac-drawer {
position:       fixed;
top:            0;
bottom:         0;
right:          var(--nac-drawer-right, 0);
left:           var(--nac-drawer-left, auto);
width:          var(--nac-drawer-w);
max-width:      100vw;
z-index:        var(--nac-z);
background:     var(--nac-bg);
box-shadow:     var(--nac-shadow);
display:        flex;
flex-direction: column;
transform:      translateX(110%);
transition:     transform .28s cubic-bezier(.4,0,.2,1);
overflow:       hidden;
will-change:    transform;
isolation:      isolate;
-webkit-overflow-scrolling: touch;
}
#nac-drawer.nac-drawer-open {
transform: translateX(0);
} body.nac-body-open { overflow: hidden; } #nac-header {
background:      var(--nac-accent);
color:           #fff;
padding:         16px 18px;
display:         flex;
align-items:     center;
justify-content: space-between;
font-family:     var(--nac-font);
font-size:       16px;
font-weight:     600;
flex-shrink:     0;
}
#nac-header-left { display: flex; align-items: center; gap: 10px; }
#nac-header-icon { font-size: 22px; }
#nac-header-actions { display: flex; align-items: center; gap: 8px; }
#nac-clear {
background: none; border: none;
color: rgba(255,255,255,.7);
cursor: pointer; font-size: 16px;
line-height: 1; padding: 0;
transition: color .15s;
}
#nac-clear:hover { color: #fff; }
#nac-close {
background: none; border: none;
color: rgba(255,255,255,.8);
cursor: pointer; font-size: 24px;
line-height: 1; padding: 0;
transition: color .15s;
}
#nac-close:hover { color: #fff; } #nac-disclaimer {
background:    #fffbeb;
border-bottom: 1px solid #fde68a;
padding:       8px 16px;
font-size:     12px;
color:         #92400e;
font-family:   var(--nac-font);
line-height:   1.4;
flex-shrink:   0;
} #nac-messages {
flex:            1;
overflow-y:      auto;
padding:         16px;
display:         flex;
flex-direction:  column;
gap:             12px;
font-family:     var(--nac-font);
font-size:       14px;
scroll-behavior: smooth;
min-height:      0;
}
.nac-msg {
max-width:     85%;
padding:       10px 14px;
border-radius: 12px;
line-height:   1.55;
word-break:    break-word;
animation:     nacFadeIn .18s ease;
}
.nac-msg-user {
background:  var(--nac-accent);
color:       #fff;
align-self:  flex-end;
border-bottom-right-radius: 3px;
}
.nac-msg-ai {
background:  var(--nac-bubble-ai);
color:       var(--nac-text);
align-self:  flex-start;
border-bottom-left-radius: 3px;
max-width:   92%;
}
.nac-msg-ai a { color: var(--nac-accent); font-weight: 600; }
.nac-msg-error { background: #fee2e2; color: #991b1b; font-size: 13px; }
.nac-msg-footer {
margin-top:  8px;
padding-top: 6px;
border-top:  1px solid rgba(0,0,0,.08);
font-size:   10.5px;
color:       var(--nac-text-light);
font-style:  italic;
line-height: 1.5;
}
.nac-model-label {
display:       inline-block;
font-style:    normal;
font-size:     10px;
background:    rgba(0,0,0,.06);
border-radius: 8px;
padding:       1px 6px;
margin-left:   4px;
font-family:   monospace;
vertical-align: middle;
} .nac-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.nac-typing span {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--nac-text-light);
animation: nacBounce 1.2s infinite;
}
.nac-typing span:nth-child(2) { animation-delay: .2s; }
.nac-typing span:nth-child(3) { animation-delay: .4s; } #nac-contact-bar {
padding:     6px 16px;
border-top:  1px solid #f3f4f6;
background:  #fafafa;
text-align:  center;
flex-shrink: 0;
}
#nac-contact-btn {
background:    none;
border:        1px solid #d1d5db;
border-radius: 20px;
padding:       5px 16px;
font-size:     12px;
color:         var(--nac-text-light);
cursor:        pointer;
font-family:   var(--nac-font);
transition:    all .15s;
}
#nac-contact-btn:hover { border-color: var(--nac-accent); color: var(--nac-accent); } #nac-char-count {
text-align:  right;
font-size:   11px;
color:       var(--nac-text-light);
padding:     2px 16px 6px;
background:  #fafafa;
font-family: var(--nac-font);
flex-shrink: 0;
} #nac-input-area {
display:     flex;
gap:         8px;
padding:     10px 14px;
border-top:  1px solid #e5e7eb;
background:  #fafafa;
flex-shrink: 0;
}
#nac-input {
flex:          1;
border:        1px solid #d1d5db;
border-radius: 8px;
padding:       8px 12px;
font-size:     14px;
font-family:   var(--nac-font);
color:         var(--nac-text);
outline:       none;
resize:        none;
max-height:    100px;
transition:    border-color .15s;
background:    #fff;
}
#nac-input:focus { border-color: var(--nac-accent); }
#nac-send {
background:    var(--nac-accent);
color:         #fff;
border:        none;
border-radius: 8px;
width:         40px;
cursor:        pointer;
font-size:     18px;
transition:    background .15s;
flex-shrink:   0;
}
#nac-send:hover    { background: var(--nac-accent-dk); }
#nac-send:disabled { opacity: .5; cursor: default; } #nac-contact-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
#nac-contact-form h3 { margin: 0; font-size: 16px; color: var(--nac-accent); }
.nac-contact-intro { font-size: 13px; color: var(--nac-text-light); margin: 0; }
#nac-cf-question, #nac-cf-name, #nac-cf-email {
border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px;
font-size: 14px; font-family: var(--nac-font); width: 100%; box-sizing: border-box;
outline: none; transition: border-color .15s;
}
#nac-cf-question { resize: vertical; min-height: 90px; }
#nac-cf-question:focus, #nac-cf-name:focus, #nac-cf-email:focus { border-color: var(--nac-accent); }
#nac-cf-status { font-size: 12.5px; color: #dc2626; min-height: 18px; }
#nac-cf-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
#nac-cf-send-btns { display: flex; gap: 8px; }
#nac-cf-send, #nac-cf-whatsapp { flex: 1; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; font-family: var(--nac-font); transition: background .15s; color: #fff; }
#nac-cf-send      { background: #2563eb; }
#nac-cf-send:hover { background: #1d4ed8; }
#nac-cf-send:disabled { opacity: .5; cursor: default; }
#nac-cf-whatsapp  { background: #25d366; }
#nac-cf-whatsapp:hover { background: #1ebe57; }
#nac-cf-back { background: none; border: none; color: var(--nac-text-light); cursor: pointer; font-size: 12px; font-family: var(--nac-font); text-align: center; padding: 4px; }
#nac-cf-back:hover { color: var(--nac-text); } .nac-contact-success { padding: 40px 20px; text-align: center; }
.nac-success-icon { font-size: 48px; color: var(--nac-accent); margin-bottom: 16px; }
.nac-contact-success h3 { margin: 0 0 10px; color: var(--nac-accent); font-size: 18px; }
.nac-contact-success p { font-size: 14px; color: var(--nac-text-light); margin: 0 0 20px; }
.nac-contact-success button { background: var(--nac-accent); color: #fff; border: none; border-radius: 8px; padding: 10px 24px; cursor: pointer; font-family: var(--nac-font); font-size: 14px; } .nac-search-offer { background: #eff6ff; border: 1px solid #bfdbfe; max-width: 92%; }
.nac-search-offer-text { font-size: 13.5px; margin-bottom: 10px; color: #1e40af; }
.nac-search-offer-btns { display: flex; gap: 8px; }
.nac-search-yes, .nac-search-no { border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: var(--nac-font); transition: background .15s; }
.nac-search-yes { background: var(--nac-accent); color: #fff; }
.nac-search-yes:hover { background: var(--nac-accent-dk); }
.nac-search-no  { background: #e5e7eb; color: #374151; }
.nac-search-no:hover { background: #d1d5db; } .nac-frustration-offer { margin-top: 8px; padding: 8px 12px; background: #eff6ff; border-radius: 8px; font-size: 13px; color: #1e40af; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nac-to-contact-btn { background: var(--nac-accent); color: #fff; border: none; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--nac-font); } @keyframes nacFadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes nacBounce {
0%, 80%, 100% { transform: translateY(0); }
40%           { transform: translateY(-6px); }
} @media (max-width: 480px) {
#nac-drawer { width: 100vw; }
#nac-trigger-wrap { bottom: 16px; right: var(--nac-pos-right, 16px); left: var(--nac-pos-left, auto); }
} .nac-feedback {
margin-top:  8px;
padding-top: 8px;
border-top:  1px solid rgba(0,0,0,.06);
display:     flex;
align-items: center;
gap:         6px;
flex-wrap:   wrap;
}
.nac-feedback-label {
font-size:  12px;
color:      var(--nac-text-light);
flex-basis: 100%;
}
.nac-fb-btn {
background:    none;
border:        1px solid #e5e7eb;
border-radius: 20px;
padding:       4px 10px;
font-size:     16px;
cursor:        pointer;
transition:    all .15s;
line-height:   1;
}
.nac-fb-btn:hover { border-color: var(--nac-accent); background: #f0fdf4; }
.nac-fb-thankyou { font-size: 12px; color: var(--nac-accent); font-style: italic; }
.nac-fb-note-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.nac-fb-label-neg { font-size: 12px; color: var(--nac-text-light); }
.nac-fb-note {
border: 1px solid #d1d5db; border-radius: 6px;
padding: 6px 8px; font-size: 12.5px; font-family: var(--nac-font);
resize: vertical;
}
.nac-fb-note-send {
align-self:    flex-start;
background:    var(--nac-accent);
color:         #fff;
border:        none;
border-radius: 6px;
padding:       5px 14px;
font-size:     12.5px;
cursor:        pointer;
font-family:   var(--nac-font);
} #nac-contact-channels {
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
#nac-contact-channels h3 { margin: 0; font-size: 16px; color: var(--nac-accent); }
#nac-channel-btns {
display:        flex;
flex-direction: column;
gap:            10px;
margin-top:     8px;
}
.nac-channel-choice {
display:       flex;
align-items:   center;
justify-content: center;
gap:           10px;
padding:       14px 20px;
border:        2px solid #e5e7eb;
border-radius: 10px;
background:    #fff;
font-size:     15px;
font-family:   var(--nac-font);
font-weight:   500;
cursor:        pointer;
transition:    all .15s;
color:         var(--nac-text);
}
.nac-channel-choice:hover {
border-color: var(--nac-accent);
background:   #f0fdf4;
color:        var(--nac-accent);
}
.nac-channel-choice[data-channel="whatsapp"]:hover {
border-color: #25d366;
background:   #f0fdf4;
color:        #16a34a;
}
.nac-channel-choice[data-channel="livechat"]:hover {
border-color: #2563eb;
background:   #eff6ff;
color:        #2563eb;
}
#nac-cf-back-channels {
background: none; border: none;
color: var(--nac-text-light);
cursor: pointer; font-size: 13px;
font-family: var(--nac-font);
text-align: center; padding: 4px;
margin-top: 4px;
}
#nac-cf-back-channels:hover { color: var(--nac-text); }