:root{
    --ipex-blue:#004080; --ipex-blue-600:#0b3a75;
    --bg:#f5f7fb; --card:#ffffff; --line:#e8eef7;
    --shadow:0 18px 40px rgba(0,0,0,.18);
}

/* Floating trigger */
.ipex-bubble{
    position:fixed; right:20px; bottom:20px; z-index:9999;
    background:var(--ipex-blue); color:#fff;
    padding:12px 16px; border-radius:28px;
    display:flex; align-items:center; gap:8px;
    box-shadow:var(--shadow); cursor:pointer;
    font:500 12px/1.2 Arial, sans-serif;
}
.ipex-bubble .pulse{ width:10px; height:10px; border-radius:50%; background:#47d16f; box-shadow:0 0 0 6px rgba(71,209,111,.25); }

/* Panel (wider + shorter) */
.ipex-panel{
    position:fixed; right:20px; bottom:86px;
    width:500px; max-width:calc(100vw - 32px);
    height:520px; display:none; flex-direction:column;
    background:var(--card); border-radius:20px;
    box-shadow:var(--shadow); overflow:hidden;
    border:1px solid var(--line); animation:pop .25s ease-out;
}
.ipex-panel.open{ display:flex; }
@keyframes pop{ from{ transform:translateY(10px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* Header */
.ipex-header{
    background:linear-gradient(90deg,var(--ipex-blue),var(--ipex-blue-600));
    color:#fff; padding:12px 14px;
    display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.ipex-logo{ height:22px; width:auto; max-width:120px; object-fit:contain; }
.title{ font-weight:700; font-size:14px; letter-spacing:.2px; }
.close{ background:transparent; color:#fff; border:0; font-size:16px; cursor:pointer; opacity:.9 }

/* Body */
.ipex-body{ flex:1; background:var(--bg); display:flex; flex-direction:column; }
.ipex-messages{ flex:1; overflow:auto; padding:16px; font-size:12px; }

/* Messages */
.msg{ display:flex; gap:10px; margin:10px 0; align-items:flex-start; }
.msg .avatar{
    width:80px; height:80px; min-width:80px;
    border-radius:50%; object-fit:cover; object-position:center;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    background:#dfe9ff; border:1px solid #cfdcff; /* visible fallback */
}
.msg .bubble{
    background:rgba(255,255,255,.9);
    border:1px solid var(--line);
    padding:12px 14px; border-radius:14px;
    max-width:70%; box-shadow:0 6px 18px rgba(0,0,0,.08);
    font-size:12px;
}
.msg.assistant .bubble{ margin-left:90px; } /* room for big avatar */
.msg.user{ justify-content:flex-end; }
.msg.user .bubble{ background:#e8f0ff; border-color:#d4e2ff; }

/* Quick replies */
.quick{ display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 8px; }
.quick button{
    background:#fff; border:1px solid var(--line);
    border-radius:20px; padding:8px 12px; cursor:pointer; font-size:12px;
}

/* Typing indicator */
.typing{ display:flex; gap:6px; align-items:center; opacity:.7; }
.typing .dot{ width:6px; height:6px; border-radius:50%; background:#9bb0d8; animation:blink 1s infinite alternate; }
.typing .dot:nth-child(2){ animation-delay:.2s } .typing .dot:nth-child(3){ animation-delay:.4s }
@keyframes blink{ from{ opacity:.3 } to{ opacity:1 } }

/* Input */
.ipex-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.ipex-input input{ flex:1; border:1px solid var(--line); border-radius:12px; padding:12px; font-size:12px; }
.ipex-input .primary{
    background:var(--ipex-blue); color:#fff; border:0; border-radius:12px;
    padding:12px 14px; font-weight:600; cursor:pointer; font-size:12px;
}