#moks-wrap { 
    position: fixed; 
    bottom: 40px; 
    right: 20px; 
    z-index: 99999; 
    font-family: sans-serif; 
}

#moks-bubble { 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    background: #fff; 
    padding: 10px 20px; 
    border-radius: 30px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
}

#moks-window { 
    width: 320px; 
    height: 480px; 
    background: #fff; 
    position: absolute; 
    bottom: 70px; 
    right: 0; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    border-radius: 12px; 
    flex-direction: column; 
    overflow: hidden;
}

/* Header & Messages Container */
.moks-header { background: #222; color: #fff; padding: 12px; display: flex; justify-content: space-between; align-items: center; }
.moks-close-btn { cursor: pointer; font-weight: bold; padding: 0 5px; }

#moks-msgs { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #f9f9f9; scroll-behavior: smooth; }

/* Bule Mesaje */
.moks-msg-user { align-self: flex-end; background: #222; color: #fff; padding: 8px 12px; border-radius: 12px 12px 0 12px; font-size: 13px; max-width: 85%; word-wrap: break-word; }
.moks-msg-ai { align-self: flex-start; background: #fff; border: 1px solid #eee; color: #333; padding: 8px 12px; border-radius: 12px 12px 12px 0; font-size: 13px; max-width: 85%; word-wrap: break-word; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Styling Imagini în Chat */
.moks-img-card { 
    margin-top: 10px; 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid #ddd;
    background: #fff;
}

.moks-chat-img { 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: transform 0.3s ease;
}

.moks-chat-img:hover {
    transform: scale(1.03);
}

/* Link-uri transformate în butoane */
.moks-btn-link { 
    display: block;
    text-align: center; 
    background: #222; 
    color: #fff !important; 
    padding: 8px; 
    margin-top: 8px; 
    border-radius: 4px; 
    text-decoration: none !important; 
    font-size: 12px; 
    font-weight: bold;
    transition: background 0.2s;
}

.moks-btn-link:hover {
    background: #444;
}

/* Footer & Input */
.moks-footer { padding: 10px; border-top: 1px solid #eee; background: #fff; }
.moks-input-group { display: flex; gap: 5px; margin-bottom: 8px; }
.moks-input-group input { flex: 1; border: 1px solid #ddd; padding: 8px; border-radius: 4px; outline: none; }

.moks-btn-send { background: #222; color: #fff; border: none; padding: 0 15px; border-radius: 4px; cursor: pointer; }
.moks-btn-lead { width: 100%; background: #f39c12; color: #fff; border: none; padding: 8px; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: bold; }

/* Animatie pentru loading */
.pulse { animation: pulse-animation 1.5s infinite; opacity: 0.7; }
@keyframes pulse-animation {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* MOBIL */
@media (max-width: 768px) {
    #moks-wrap { bottom: 100px; right: 10px; }
    #moks-bubble { padding: 10px; border-radius: 50%; }
    #moks-icon-label { display: none !important; }
    #moks-window { width: calc(100vw - 20px); height: 70vh; bottom: 60px; }
}