/* ─── Enzo Chatbot Frontend ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

.enzo-chatbot-container *,
.enzo-chatbot-container *::before,
.enzo-chatbot-container *::after { box-sizing: border-box; margin: 0; padding: 0; }

.enzo-chatbot-container {
    --pink: #E0457B;
    --pink-d: #b8325f;
    --pink-l: #fce8f0;
    --beige: #C4916A;
    --beige-l: #f5ece4;
    --beige-m: #e8d5c4;
    --dark: #1a1412;
    --text: #2d2420;
    --muted: #7a6560;
    --white: #fff;
    --bg: #faf8f6;
    --r: 16px;
    --rs: 10px;

    font-family: 'DM Sans', sans-serif;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 120px);
    background: var(--white);
    border-radius: var(--r);
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── Header ─── */
.enzo-w-head {
    background: linear-gradient(135deg, #2d2420, var(--dark));
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.enzo-w-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--beige));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.enzo-w-head-info h3 { font-size: 13px; font-weight: 600; color: #fff; }
.enzo-w-head-info p  { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 1px; }
.enzo-online {
    width: 7px; height: 7px;
    background: #22c55e; border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 0 6px #22c55e;
    animation: enzo-blink 2s infinite;
}
@keyframes enzo-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ─── Flow Tabs ─── */
.enzo-flow-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: 8px 8px 0;
    background: var(--bg);
    flex-shrink: 0;
}
.enzo-ftab {
    padding: 6px 4px;
    border-radius: 6px;
    border: 1.5px solid var(--beige-m);
    background: var(--white);
    font-size: 9px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
    font-family: 'DM Sans', sans-serif;
    text-align: center;
    line-height: 1.25;
}
.enzo-ftab-icon { font-size: 14px; display: block; margin-bottom: 1px; }
.enzo-ftab:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-l); }
.enzo-ftab.active { background: var(--dark); border-color: var(--dark); color: var(--white); }

/* ─── Progress ─── */
.enzo-w-prog { padding: 8px 14px 0; display: flex; gap: 3px; background: var(--bg); flex-shrink: 0; }
.enzo-pd { height: 3px; flex: 1; border-radius: 2px; background: var(--beige-m); transition: background .3s; }
.enzo-pd.on { background: var(--pink); }

/* ─── Messages ─── */
.enzo-w-msgs {
    padding: 12px;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    scroll-behavior: smooth;
}
.enzo-w-msgs::-webkit-scrollbar { width: 3px; }
.enzo-w-msgs::-webkit-scrollbar-thumb { background: var(--beige-m); border-radius: 2px; }

.enzo-msg { display: flex; flex-direction: column; gap: 4px; animation: enzo-mIn .28s ease; }
@keyframes enzo-mIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.enzo-msg.bot { align-items: flex-start; }
.enzo-msg.user { align-items: flex-end; }
.enzo-bubble { max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; }
.enzo-msg.bot .enzo-bubble {
    background: #fff; color: var(--text);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.enzo-msg.user .enzo-bubble {
    background: linear-gradient(135deg, var(--pink), var(--pink-d));
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.enzo-mtime { font-size: 9px; color: var(--muted); padding: 0 4px; }

/* Typing indicator */
.enzo-typing { display: flex; gap: 4px; padding: 9px 12px; background: #fff; border-radius: 4px 16px 16px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); width: fit-content; }
.enzo-tdot { width: 5px; height: 5px; background: var(--beige); border-radius: 50%; animation: enzo-td 1.2s infinite; }
.enzo-tdot:nth-child(2) { animation-delay: .2s; }
.enzo-tdot:nth-child(3) { animation-delay: .4s; }
@keyframes enzo-td { 0%,80%,100%{transform:scale(1);opacity:.5} 40%{transform:scale(1.3);opacity:1} }

/* ─── Options ─── */
.enzo-w-opts { padding: 0 12px 12px; flex-shrink: 0; max-height: 50%; overflow-y: auto; }
.enzo-opts-list { display: flex; flex-direction: column; gap: 5px; }
.enzo-obtn {
    width: 100%; padding: 9px 12px;
    border-radius: var(--rs);
    border: 1.5px solid var(--beige-m);
    background: #fff;
    font-size: 12.5px; font-weight: 500;
    color: var(--text); cursor: pointer;
    text-align: left; transition: all .2s;
    display: flex; align-items: center; gap: 8px;
    font-family: 'DM Sans', sans-serif;
}
.enzo-obtn:hover {
    border-color: var(--pink); background: var(--pink-l);
    color: var(--pink-d); transform: translateX(3px);
}
.enzo-obtn .enzo-oi { font-size: 15px; width: 20px; flex-shrink: 0; }
.enzo-obtn .enzo-ol { flex: 1; line-height: 1.3; }
.enzo-obtn .enzo-oprice { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; font-weight: 400; }
.enzo-obtn:hover .enzo-oprice { color: var(--pink-d); }
.enzo-obtn .enzo-oa { font-size: 10px; opacity: .35; transition: opacity .2s; flex-shrink: 0; }
.enzo-obtn:hover .enzo-oa { opacity: 1; }

/* ─── Info bubble ─── */
.enzo-info-bubble {
    background: var(--pink-l);
    border: 1px solid var(--pink);
    border-radius: var(--rs);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--pink-d);
    margin: 0 12px 8px;
    line-height: 1.45;
}
.enzo-info-bubble strong { display: block; margin-bottom: 2px; font-size: 12.5px; }

/* ─── Pricing info ─── */
.enzo-pricing-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; padding: 0 12px 8px;
}
.enzo-ptier {
    border: 1.5px solid var(--beige-m);
    border-radius: var(--rs);
    padding: 10px 6px;
    text-align: center;
    background: #fff;
}
.enzo-ptier.best { border-color: var(--pink); background: var(--pink-l); }
.enzo-ptier h4 { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.enzo-ptier .price { font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--dark); }
.enzo-ptier .price span { font-size: 9px; font-weight: 400; color: var(--muted); font-family: 'DM Sans', sans-serif; }
.enzo-ptier .hrs { font-size: 9px; color: var(--muted); margin-top: 2px; }
.enzo-ptier.best h4 { color: var(--pink-d); }
.enzo-ptier.best .price { color: var(--pink-d); }

/* ─── Form ─── */
.enzo-w-form { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.enzo-w-form input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--beige-m);
    border-radius: var(--rs);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text); background: #fff;
    transition: border-color .2s; outline: none;
}
.enzo-w-form input:focus { border-color: var(--pink); }
.enzo-w-form input::placeholder { color: var(--muted); }
.enzo-sbtn {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, var(--pink), var(--pink-d));
    color: #fff; border: none;
    border-radius: var(--rs);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 4px 14px rgba(224,69,123,.35);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: .2px;
}
.enzo-sbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(224,69,123,.4); }
.enzo-rst {
    background: none; border: none;
    font-size: 11px; color: var(--muted);
    cursor: pointer; text-align: center;
    padding: 4px;
    font-family: 'DM Sans', sans-serif;
    text-decoration: underline; width: 100%;
}

/* ─── Floating Widget ─── */
.enzo-chatbot-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0457B, #b8325f);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(224,69,123,.45);
    z-index: 99999;
    transition: transform .2s;
}
.enzo-chatbot-fab:hover { transform: scale(1.08); }
.enzo-fab-icon { font-size: 26px; color: #fff; line-height: 1; }

/* ─── Popup Bubble ─── */
.enzo-fab-popup {
    position: fixed;
    bottom: 92px; right: 24px;
    background: #fff;
    color: #2d2420;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 16px;
    border-radius: 12px 12px 4px 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
    z-index: 99999;
    max-width: 240px;
    animation: enzo-popIn .4s ease;
    cursor: pointer;
}
.enzo-fab-popup::after {
    content: '';
    position: absolute;
    bottom: -6px; right: 22px;
    width: 12px; height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0,0,0,.06);
}
.enzo-fab-popup-close {
    position: absolute;
    top: -8px; left: -8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #eee;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #999;
    line-height: 1;
}
.enzo-fab-popup-close:hover { background: #ddd; color: #666; }
@keyframes enzo-popIn { from{opacity:0;transform:translateY(10px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }

.enzo-chatbot-floating {
    position: fixed;
    bottom: 96px; right: 24px;
    z-index: 99998;
    animation: enzo-slideUp .3s ease;
}
@keyframes enzo-slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.enzo-hidden { display: none !important; }

/* ─── Responsive ─── */
@media (max-height: 750px) {
    .enzo-chatbot-container { max-height: calc(100vh - 110px); }
    .enzo-w-msgs { min-height: 0; }
}

@media (max-height: 600px) {
    .enzo-chatbot-container { max-height: calc(100vh - 100px); }
    .enzo-chatbot-floating { bottom: 80px; }
    .enzo-chatbot-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
    .enzo-fab-popup { bottom: 76px; right: 16px; }
}

@media (max-width: 480px) {
    .enzo-chatbot-floating {
        bottom: 0; right: 0; left: 0;
        width: 100%;
    }
    .enzo-chatbot-floating .enzo-chatbot-container {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
    }
    .enzo-flow-tabs { grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 6px 0; }
    .enzo-ftab { font-size: 8px; padding: 5px 3px; }
    .enzo-ftab-icon { font-size: 12px; }
    .enzo-fab-popup { right: 16px; bottom: 92px; max-width: 200px; font-size: 12.5px; }
}

@media (max-width: 360px) {
    .enzo-chatbot-container { max-width: 100%; }
    .enzo-bubble { font-size: 12px; }
    .enzo-obtn { font-size: 11.5px; padding: 8px 10px; }
}