/* ============================================================
   Nipak / WooCommerce AI Chat - Side Drawer Widget
   ============================================================ */

: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;
}

/* ---- Trigger knop ---- */
#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); }

/* ---- Tekstballonnetje ---- */
#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); }

/* ---- Overlay ---- */
#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;
}

/* ---- Drawer ---- */
#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);
}

/* Scroll lock */
body.nac-body-open { overflow: hidden; }

/* ---- Header ---- */
#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; }

/* ---- Disclaimer ---- */
#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;
}

/* ---- Messages ---- */
#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;
}

/* Typing indicator */
.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; }

/* ---- Contact bar ---- */
#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); }

/* ---- Char counter ---- */
#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;
}

/* ---- Input area ---- */
#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; }

/* ---- Contact formulier ---- */
#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); }

/* ---- Succes scherm ---- */
.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; }

/* ---- Search offer ---- */
.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; }

/* ---- Frustratie aanbod ---- */
.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); }

/* ---- Animaties ---- */
@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); }
}

/* ---- Mobiel ---- */
@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); }
}