/* ============================================================
   PWD N8N Chat Widget — Frontend Styles
   Version: 1.1.1
   ============================================================ */

/* ── Widget container ───────────────────────────────────────── */
#pwd-ncw-widget {
    position:   fixed;
    bottom:     24px;
    z-index:    99998;
    display:    flex;
    flex-direction: column;
    align-items: flex-end;
    gap:        12px;
}

.pwd-ncw-position-right { right: 24px; }
.pwd-ncw-position-left  { left: 24px; align-items: flex-start; }

/* ── Toggle button ──────────────────────────────────────────── */
#pwd-ncw-toggle {
    display:          flex;
    align-items:      center;
    gap:              8px;
    min-width:        56px;
    min-height:       56px;
    border-radius:    28px;
    border:           none;
    background-color: var(--pwd-ncw-color, #6366f1);
    color:            #fff;
    font-size:        .875rem;
    font-weight:      600;
    font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor:           pointer;
    padding:          0 20px 0 14px;
    box-shadow:       0 4px 20px rgba(0,0,0,.2);
    transition:       transform .2s, box-shadow .2s;
    flex-shrink:      0;
}

#pwd-ncw-toggle:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

#pwd-ncw-toggle:active {
    transform:  translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.pwd-ncw-btn-icon {
    width:       26px;
    height:      26px;
    object-fit:  contain;
    flex-shrink: 0;
}

#pwd-ncw-toggle svg {
    width:       26px;
    height:      26px;
    fill:        currentColor;
    flex-shrink: 0;
    transition:  transform .3s;
}

#pwd-ncw-toggle.is-open svg {
    transform: scale(0.9);
}

.pwd-ncw-btn-label {
    white-space: nowrap;
    line-height: 1;
}

/* ── Greeting bubble ────────────────────────────────────────── */
.pwd-ncw-greeting {
    position:      relative;
    background:    #fff;
    color:         #1e293b;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:     .875rem;
    font-weight:   500;
    padding:       10px 36px 10px 16px;
    border-radius: 12px 12px 12px 2px;
    box-shadow:    0 4px 16px rgba(0,0,0,.12);
    max-width:     220px;
    line-height:   1.4;
    animation:     pwd-ncw-fade-in .4s ease;
}

.pwd-ncw-position-right .pwd-ncw-greeting {
    border-radius: 12px 12px 2px 12px;
}

.pwd-ncw-greeting__close {
    position:    absolute;
    top:         6px;
    right:       10px;
    font-size:   1.1rem;
    line-height: 1;
    cursor:      pointer;
    color:       #94a3b8;
    transition:  color .15s;
}
.pwd-ncw-greeting__close:hover { color: #ef4444; }

/* ── Frame wrapper ──────────────────────────────────────────── */
#pwd-ncw-frame-wrapper {
    position:        fixed;
    bottom:          92px;    /* button(56) + widget-bottom(24) + gap(12) */
    background:      #fff;
    border-radius:   16px;
    box-shadow:      0 12px 48px rgba(0,0,0,.2);
    display:         none;
    flex-direction:  column;
    overflow:        hidden;
    transform:       translateY(16px) scale(0.97);
    opacity:         0;
    transition:      transform .28s cubic-bezier(0.34,1.56,0.64,1), opacity .25s ease;
    transform-origin: bottom center;
    z-index:         99999;
    max-height:      calc(100vh - 108px);
}

.pwd-ncw-position-right #pwd-ncw-frame-wrapper { right: 24px; }
.pwd-ncw-position-left  #pwd-ncw-frame-wrapper { left:  24px; }

#pwd-ncw-frame-wrapper.pwd-ncw-show {
    transform: translateY(0) scale(1);
    opacity:   1;
}

/* ── Chat header ─────────────────────────────────────────────── */
#pwd-ncw-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 14px 12px 18px;
    background-color: var(--pwd-ncw-color, #6366f1);
    color:           #fff;
    flex-shrink:     0;
}

#pwd-ncw-header-title {
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight:   600;
    font-size:     .9375rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.pwd-ncw-header-controls {
    display: flex;
    gap:     4px;
}

#pwd-ncw-fullscreen,
#pwd-ncw-close {
    background:    rgba(255,255,255,.12);
    border:        none;
    color:         #fff;
    width:         32px;
    height:        32px;
    border-radius: 6px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0;
    transition:    background .15s;
}

#pwd-ncw-fullscreen:hover,
#pwd-ncw-close:hover { background: rgba(255,255,255,.25); }

#pwd-ncw-fullscreen svg,
#pwd-ncw-close svg {
    width:  16px;
    height: 16px;
    stroke: currentColor;
}

/* ── Messages area ───────────────────────────────────────────── */
#pwd-ncw-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    background: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:  .9rem;
}

#pwd-ncw-messages::-webkit-scrollbar { width: 4px; }
#pwd-ncw-messages::-webkit-scrollbar-track { background: transparent; }
#pwd-ncw-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* ── Message bubbles ─────────────────────────────────────────── */
.pwd-ncw-msg {
    max-width:     80%;
    padding:       10px 14px;
    border-radius: 14px;
    line-height:   1.5;
    word-wrap:     break-word;
    white-space:   pre-wrap;
}

.pwd-ncw-msg--user {
    align-self:    flex-end;
    background:    var(--pwd-ncw-color, #6366f1);
    color:         #fff;
    border-bottom-right-radius: 4px;
}

.pwd-ncw-msg--bot {
    align-self:    flex-start;
    background:    #fff;
    color:         #1e293b;
    border:        1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    box-shadow:    0 1px 3px rgba(0,0,0,.06);
}

.pwd-ncw-msg--thinking {
    align-self:    flex-start;
    background:    #fff;
    color:         #94a3b8;
    border:        1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    font-style:    italic;
    animation:     pwd-ncw-pulse 1.4s ease-in-out infinite;
}

.pwd-ncw-msg--error {
    align-self:    flex-start;
    background:    #fef2f2;
    color:         #dc2626;
    border:        1px solid #fecaca;
    border-bottom-left-radius: 4px;
    font-size:     .8375rem;
}

/* ── Input bar ───────────────────────────────────────────────── */
#pwd-ncw-input-bar {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    padding:     12px;
    background:  #fff;
    border-top:  1px solid #e2e8f0;
    flex-shrink: 0;
}

#pwd-ncw-input {
    flex:        1;
    border:      1px solid #e2e8f0;
    border-radius: 10px;
    padding:     9px 13px;
    font-size:   .9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:       #1e293b;
    background:  #f8fafc;
    resize:      none;
    outline:     none;
    line-height: 1.5;
    max-height:  120px;
    overflow-y:  auto;
    transition:  border-color .15s;
}

#pwd-ncw-input:focus {
    border-color: var(--pwd-ncw-color, #6366f1);
    background:   #fff;
}

#pwd-ncw-input:disabled {
    opacity: .6;
    cursor:  not-allowed;
}

#pwd-ncw-send {
    width:         40px;
    height:        40px;
    border-radius: 10px;
    border:        none;
    color:         #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    opacity .15s, transform .15s;
    padding:       0;
}

#pwd-ncw-send:hover   { opacity: .85; }
#pwd-ncw-send:active  { transform: scale(.95); }
#pwd-ncw-send:disabled { opacity: .4; cursor: not-allowed; }

#pwd-ncw-send svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* ── Overlay ─────────────────────────────────────────────────── */
.pwd-ncw-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index:    99997;
    display:    none;
    opacity:    0;
    transition: opacity .25s;
}

.pwd-ncw-overlay.pwd-ncw-overlay--show {
    display: block;
    opacity: 1;
}

/* ── Fullscreen mode ─────────────────────────────────────────── */
#pwd-ncw-frame-wrapper.pwd-ncw-fullscreen {
    top:           0 !important;
    left:          0 !important;
    right:         0 !important;
    bottom:        0 !important;
    width:         100vw  !important;
    height:        100vh  !important;
    max-height:    none   !important;
    border-radius: 0 !important;
    z-index:       999999 !important;
    transform:     none !important;
}

/* ── Mobile hide ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    #pwd-ncw-widget.pwd-ncw-mobile-hidden { display: none !important; }
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes pwd-ncw-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pwd-ncw-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── Contact capture form ────────────────────────────────────── */
.pwd-ncw-contact-form {
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding:       16px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    max-width:     88%;
    align-self:    flex-start;
    box-shadow:    0 1px 4px rgba(0,0,0,.07);
    animation:     pwd-ncw-fade-in .3s ease;
}

.pwd-ncw-cf-intro {
    margin:      0;
    font-size:   .875rem;
    color:       #1e293b;
    line-height: 1.45;
}

.pwd-ncw-cf-field {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.pwd-ncw-cf-input {
    border:        1px solid #e2e8f0;
    border-radius: 8px;
    padding:       8px 11px;
    font-size:     .875rem;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:         #1e293b;
    background:    #f8fafc;
    outline:       none;
    transition:    border-color .15s, background .15s;
    width:         100%;
    box-sizing:    border-box;
}

.pwd-ncw-cf-input:focus {
    border-color: var(--pwd-ncw-color, #6366f1);
    background:   #fff;
}

.pwd-ncw-cf-input--error {
    border-color: #ef4444 !important;
    background:   #fff5f5 !important;
}

.pwd-ncw-cf-error {
    font-size:  .775rem;
    color:      #ef4444;
    min-height: 1em;
    line-height: 1.3;
}

.pwd-ncw-cf-btn {
    align-self:       flex-end;
    background:       var(--pwd-ncw-color, #6366f1);
    color:            #fff;
    border:           none;
    border-radius:    8px;
    padding:          8px 18px;
    font-size:        .875rem;
    font-weight:      600;
    font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor:           pointer;
    transition:       opacity .15s, transform .15s;
    white-space:      nowrap;
}

.pwd-ncw-cf-btn:hover  { opacity: .88; }
.pwd-ncw-cf-btn:active { transform: scale(.97); }