/* 🎨 Santis Concierge Theme (Quiet Luxury) */



:root {

    --nv-chat-bg: rgba(20, 20, 24, 0.85);

    /* Dark Glass */

    --nv-chat-text: #ececec;

    --nv-chat-accent: #d4af37;

    /* Gold */

    --nv-chat-bubble-sys: rgba(255, 255, 255, 0.08);

    --nv-chat-bubble-user: #d4af37;

    --nv-chat-radius: 16px;

}



/* 1. Floating Button */

/* 1. Floating Button */

.nv-fab {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--nv-chat-bg);

    -webkit-backdrop-filter: blur(12px);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    z-index: 9999999;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--nv-chat-text);

}



.nv-fab:hover {

    transform: scale(1.05) translateY(-2px);

    border-color: var(--nv-chat-accent);

}



.nv-fab.active {

    transform: rotate(45deg);

    background: transparent;

    border: none;

    box-shadow: none;

    opacity: 0;

    pointer-events: none;

}



.nv-fab-icon {

    font-size: 24px;

    line-height: 1;

}



.nv-fab-label {

    font-size: 9px;

    margin-top: 4px;

    letter-spacing: 0.5px;

    opacity: 0.7;

}



/* 2. Chat Window */

.nv-chat-window {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 380px;

    height: 600px;

    max-height: 80vh;

    background: var(--nv-chat-bg);

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);

    z-index: 9999999;

    display: flex;

    flex-direction: column;

    overflow: hidden;



    opacity: 1;

    transform: translateY(0) scale(1);

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



.nv-chat-window.hidden {

    opacity: 0;

    pointer-events: none;

    transform: translateY(20px) scale(0.95);

}



/* Header */

.nv-chat-header {

    padding: 18px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(0, 0, 0, 0.2);

}



.nv-chat-title {

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.5px;

    color: var(--nv-chat-text);

    display: flex;

    align-items: center;

    gap: 8px;

}



.status-dot {

    width: 8px;

    height: 8px;

    background: #0f9d58;

    border-radius: 50%;

    box-shadow: 0 0 8px #0f9d58;

}



.nv-chat-close {

    background: none;

    border: none;

    color: var(--nv-chat-text);

    font-size: 24px;

    cursor: pointer;

    opacity: 0.5;

}



/* Body */

.nv-chat-body {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.nv-msg {

    max-width: 80%;

    padding: 12px 16px;

    font-size: 14px;

    line-height: 1.5;

    position: relative;

    animation: slideUp 0.3s ease-out forwards;

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.nv-msg.system {

    align-self: flex-start;

    background: var(--nv-chat-bubble-sys);

    color: #ddd;

    border-radius: 4px 16px 16px 16px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.nv-msg.user {

    align-self: flex-end;

    background: var(--nv-chat-bubble-user);

    color: #111;

    border-radius: 16px 4px 16px 16px;

    font-weight: 500;

}



/* Quick Chips */

.nv-quick-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

}



.nv-quick-chips button {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    padding: 6px 12px;

    border-radius: 12px;

    font-size: 11px;

    cursor: pointer;

    transition: all 0.2s;

}



.nv-quick-chips button:hover {

    background: var(--nv-chat-accent);

    color: #000;

    border-color: var(--nv-chat-accent);

}



/* Product Cards in Chat */

.nv-card-stream {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding: 4px;

    margin-top: 8px;

    margin-bottom: 8px;

}



.nv-chat-card {

    flex: 0 0 200px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);

    cursor: pointer;

    transition: transform 0.2s;

}



.nv-chat-card:hover {

    border-color: var(--nv-chat-accent);

}



.nv-chat-card .card-img {

    height: 100px;

    background-size: cover;

    background-position: center;

}



.nv-chat-card .card-info {

    padding: 10px;

    font-size: 12px;

}



.nv-chat-card strong {

    display: block;

    color: #fff;

    margin-bottom: 4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* Input Area */

.nv-chat-input-area {

    padding: 15px;

    background: rgba(0, 0, 0, 0.3);

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    display: flex;

    gap: 10px;

}



#nv-chat-input {

    flex: 1;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 10px 16px;

    color: #fff;

    outline: none;

    font-family: inherit;

}



#nv-chat-input:focus {

    border-color: var(--nv-chat-accent);

}



#nv-chat-send {

    background: var(--nv-chat-accent);

    color: #000;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    font-weight: bold;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Typing Animation */

.typing-dots span {

    animation: blink 1.4s infinite both;

    margin: 0 1px;

}



.typing-dots span:nth-child(2) {

    animation-delay: 0.2s;

}



.typing-dots span:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes blink {

    0% {

        opacity: 0.2;

    }



    20% {

        opacity: 1;

    }



    100% {

        opacity: 0.2;

    }

}



/* Mobile */

@media (max-width: 480px) {

    .nv-chat-window {

        bottom: 0;

        right: 0;

        left: 0;

        width: 100%;

        height: 90vh;

        border-radius: 20px 20px 0 0;

    }

}



/* Rich Card Details */

.nv-chat-card .card-img {

    position: relative;

}



.nv-mini-badge {

    position: absolute;

    top: 6px;

    left: 6px;

    background: var(--nv-chat-accent);

    color: #000;

    font-size: 9px;

    font-weight: 700;

    padding: 2px 6px;

    border-radius: 4px;

    text-transform: uppercase;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.nv-mini-desc {

    font-size: 10px;

    color: rgba(255, 255, 255, 0.6);

    margin: 4px 0;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.nv-mini-meta {

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    color: var(--nv-chat-accent);

    opacity: 0.9;

    margin-top: 6px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding-top: 4px;

}



/* ============================================

   PHASE 6 ENHANCEMENTS (04.02.2026)

   ============================================ */



/* 1. Header Branding */

.nv-chat-header .brand {

    display: flex;

    align-items: center;

    gap: 12px;

}



.nv-brand-icon {

    flex-shrink: 0;

}



.nv-chat-header .text h3 {

    margin: 0;

    font-size: 15px;

    font-weight: 600;

    color: var(--nv-chat-text);

    letter-spacing: 0.5px;

}



.nv-chat-header .status-line {

    font-size: 11px;

    color: rgba(255, 255, 255, 0.6);

    display: flex;

    align-items: center;

    gap: 6px;

}



.nv-chat-header .status-dot {

    width: 8px;

    height: 8px;

    background: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 8px #22c55e;

    animation: pulse 2s infinite;

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



.close-btn {

    background: none;

    border: none;

    color: var(--nv-chat-text);

    font-size: 26px;

    cursor: pointer;

    opacity: 0.6;

    transition: opacity 0.2s, transform 0.2s;

    line-height: 1;

}



.close-btn:hover {

    opacity: 1;

    transform: scale(1.1);

}



/* 2. Rich Card Hover Effects */

.nv-chat-card {

    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

}



.nv-chat-card:hover {

    transform: translateY(-4px) scale(1.02);

    border-color: var(--nv-chat-accent);

    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);

}



.nv-chat-card .card-img {

    transition: transform 0.4s ease;

}



.nv-chat-card:hover .card-img {

    transform: scale(1.05);

}



.nv-chat-card .card-info strong {

    transition: color 0.2s;

}



.nv-chat-card:hover .card-info strong {

    color: var(--nv-chat-accent);

}



/* 3. Enhanced Message Animations */

.nv-msg {

    opacity: 0;

    transform: translateY(12px);

    animation: messageSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes messageSlide {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.nv-msg.user {

    animation-delay: 0.05s;

}



/* Card Stream Animation */

.nv-card-stream {

    animation: streamFade 0.5s ease-out forwards;

}



@keyframes streamFade {

    from {

        opacity: 0;

        transform: translateX(-10px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Typing Indicator Enhancement */

.typing-dots {

    display: inline-flex;

    gap: 4px;

}



.typing-dots span {

    width: 6px;

    height: 6px;

    background: var(--nv-chat-accent);

    border-radius: 50%;

    animation: typingBounce 1.4s infinite ease-in-out;

}



.typing-dots span:nth-child(1) {

    animation-delay: 0s;

}



.typing-dots span:nth-child(2) {

    animation-delay: 0.2s;

}



.typing-dots span:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes typingBounce {



    0%,

    80%,

    100% {

        transform: scale(0.8);

        opacity: 0.5;

    }



    40% {

        transform: scale(1.2);

        opacity: 1;

    }

}



/* 4. Mobile Polish */

@media (max-width: 480px) {

    .nv-fab {

        bottom: 20px;

        right: 20px;

        width: 56px;

        height: 56px;

    }



    .nv-chat-window {

        bottom: 0;

        right: 0;

        left: 0;

        width: 100%;

        max-height: 85vh;

        border-radius: 24px 24px 0 0;

    }



    .nv-chat-header {

        padding: 16px;

    }



    .nv-chat-body {

        padding: 16px;

    }



    .nv-chat-card {

        flex: 0 0 180px;

    }



    .nv-quick-chips {

        gap: 6px;

    }



    .nv-quick-chips button {

        font-size: 10px;

        padding: 5px 10px;

    }

}



/* Safe Area for iOS */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .nv-chat-input-area {

        padding-bottom: calc(15px + env(safe-area-inset-bottom));

    }

}