:root {
    --kranzle-red: #d32f2f;
    --kranzle-blue: #0d47a1;
    --bg-light: #f4f4f9;
    --reset-grey: #607d8b;
}

#chat-trigger {
    position: fixed; top: 5%; right: 25px;
    background: var(--kranzle-red); color: white;
    border: none; border-radius: 50%; width: 65px; height: 65px;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: 28px; z-index: 9999;
}

#chat-window {
    position: fixed; bottom: 100px; right: 25px;
    width: 350px; height: 600px;
    background: white; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    display: none; flex-direction: column; overflow: hidden; z-index: 9999;
}

.chat-header {
    background: var(--kranzle-blue); color: white;
    padding: 15px; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
}

#chat-body {
    flex: 1; padding: 15px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 15px;
    background: var(--bg-light);
}

.msg { padding: 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; font-family: sans-serif; }
.bot-msg { background: white; align-self: flex-start; border: 1px solid #ddd; width: 90%; }
.user-msg { background: var(--kranzle-blue); color: white; align-self: flex-end; max-width: 80%; }

.prod-table { width: 100%; border-collapse: collapse; margin-top: 10px; border: none !important; }
.prod-table td { border: none !important; padding: 6px; vertical-align: middle; }
.prod-img { width: 80px; height: auto; border-radius: 4px; }
.prod-name { font-weight: bold; font-size: 15px; color: var(--kranzle-blue); }
.prod-desc { font-size: 12px; color: #444; padding: 10px 6px !important; }
.prod-link { font-size: 12px; font-weight: bold; color: var(--kranzle-red); text-decoration: none; display: block; }

.options-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opt-btn {
    background: #fff; border: 1.5px solid var(--kranzle-red);
    color: var(--kranzle-red); padding: 7px 12px;
    border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.opt-btn:hover { background: var(--kranzle-red); color: white; }
.nav-btn { border-color: var(--reset-grey) !important; color: var(--reset-grey) !important; }

.chat-input-area { padding: 10px; background: white; border-top: 1px solid #eee; display: flex; gap: 5px; }
#user-input { flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 8px 15px; outline: none; }
#send-btn { background: var(--kranzle-blue); color: white; border: none; padding: 8px 12px; border-radius: 50%; cursor: pointer; }