.ce-lc,.ce-lc *{box-sizing:border-box}.ce-lc{--blue:#114b9b;--blue2:#188af0;--blue-soft:#eaf4ff;--evo:#6754d9;--evo-soft:#f1eeff;--human:#15835d;--human-soft:#eaf8f2;--new:#b86b00;--new-soft:#fff4de;--ink:#172134;--muted:#6d7b90;--line:#dfe6ef;--page:#f5f7fa;width:100%;color:var(--ink);font-size:14px}.ce-lc-app{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 55px rgba(25,42,68,.09)}.ce-lc-app__header{min-height:112px;display:flex;gap:24px;align-items:center;justify-content:space-between;padding:21px 25px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 87% 0%,rgba(24,138,240,.1),transparent 30%),#fff}.ce-lc-eyebrow{display:block;margin-bottom:5px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.ce-lc-app__header h1{margin:0;font-size:clamp(27px,2.8vw,37px);line-height:1.08;letter-spacing:-.025em}.ce-lc-app__header p{max-width:760px;margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.ce-lc-connected{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap;font-size:11px;font-weight:850}.ce-lc-connected i{width:8px;height:8px;border-radius:50%;background:#19a56c;box-shadow:0 0 0 4px rgba(25,165,108,.1)}
.ce-lc-workspace{display:grid;grid-template-columns:290px minmax(520px,1fr) 280px;height:610px;background:var(--page)}.ce-lc-sidebar,.ce-lc-thread,.ce-lc-details{min-width:0;background:#fff}.ce-lc-sidebar{border-right:1px solid var(--line)}.ce-lc-details{border-left:1px solid var(--line)}.ce-lc-sidebar__header,.ce-lc-details__header,.ce-lc-thread__header{height:62px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.ce-lc-sidebar__header{justify-content:space-between;padding:0 15px 0 17px}.ce-lc-sidebar__header>div{display:flex;flex-direction:column}.ce-lc-sidebar__header strong,.ce-lc-details__header strong{font-size:13px}.ce-lc-sidebar__header span{margin-top:2px;color:#8c99ab;font-size: 11px}.ce-lc-icon-button{width:33px;height:33px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);cursor:pointer;font-size:16px}.ce-lc-conversation-list{height:548px;overflow:auto;padding:8px;background:#fbfcfe}.ce-lc-list-loading{padding:34px 12px;color:var(--muted);font-size:12px;text-align:center}.ce-lc-conversation{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;margin-bottom:5px;border:1px solid transparent;border-radius:13px;padding:11px;background:#fff;color:inherit;cursor:pointer;text-align:left;transition:border-color .14s,background .14s,transform .14s}.ce-lc-conversation:hover{border-color:#d7e1ed;transform:translateY(-1px)}.ce-lc-conversation.is-active{border-color:#9ec8f5;background:#eaf4ff}.ce-lc-conversation.is-new{border-color:#f0c77e;background:var(--new-soft)}.ce-lc-profile{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#dcebfc;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.02em}.ce-lc-profile img{width:100%;height:100%;object-fit:cover}.ce-lc-profile--evo{border:1px solid #d8d1fa;background:#fff}.ce-lc-profile--human{background:#dcf3e7;color:var(--human)}.ce-lc-conversation__content{min-width:0}.ce-lc-conversation__top,.ce-lc-conversation__bottom{display:flex;gap:8px;align-items:center;justify-content:space-between}.ce-lc-conversation__top strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-conversation__top time{flex:0 0 auto;color:#98a4b4;font-size: 11px}.ce-lc-conversation__preview{display:block;overflow:hidden;margin-top:4px;color:#68778d;font-size: 11px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-conversation__bottom{margin-top:7px}.ce-lc-owner{display:inline-flex;gap:5px;align-items:center;font-size: 11px;font-weight:750}.ce-lc-owner:before{width:7px;height:7px;border-radius:50%;background:var(--evo);content:""}.ce-lc-owner.is-human:before{background:var(--human)}.ce-lc-conversation__new{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;background:#f6d99f;color:#855000;font-size: 11px;font-weight:950;letter-spacing:.07em}
.ce-lc-thread{display:grid;grid-template-rows:62px minmax(0,1fr) auto}.ce-lc-thread__header{justify-content:space-between;gap:15px;padding:0 18px}.ce-lc-thread-identity{min-width:0;display:flex;gap:10px;align-items:center}.ce-lc-thread-avatar{width:41px;height:41px;display:grid;flex:0 0 auto;place-items:center;overflow:hidden;border-radius:50%;background:#dcebfc;color:var(--blue);font-size:11px;font-weight:900}.ce-lc-thread-avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-thread-identity>div:last-child{min-width:0;display:flex;flex-direction:column}.ce-lc-thread-identity strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-thread-identity span{margin-top:3px;color:#8491a3;font-size: 11px}.ce-lc-thread-mode{border-radius:999px;padding:6px 10px;background:var(--evo-soft);color:#5744c2;font-size: 11px;font-weight:900}.ce-lc-thread-mode.is-human{background:var(--human-soft);color:var(--human)}.ce-lc-thread__messages{overflow:auto;padding:20px 22px 26px;background:#f7f9fc;scroll-behavior:smooth}.ce-lc-thread-empty{height:100%;display:grid;place-content:center;gap:6px;color:var(--muted);text-align:center}.ce-lc-thread-empty>span{font-size:26px}.ce-lc-thread-empty strong{font-size:14px}.ce-lc-thread-empty p{margin:0;font-size:11px}.ce-lc-message{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:9px 0}.ce-lc-message__content{min-width:0}.ce-lc-message__meta{display:flex;gap:8px;align-items:baseline;margin-bottom:5px}.ce-lc-message__meta strong{font-size:11px}.ce-lc-message__meta time{color:#98a4b4;font-size: 11px}.ce-lc-message__body{width:fit-content;max-width:78%;border:1px solid #cddff2;border-radius:14px;padding:10px 13px;background:#eaf4ff;color:#17375c;font-size:12px;line-height:1.52;white-space:pre-wrap;word-break:break-word}.ce-lc-message[data-sender=agent] .ce-lc-message__body{border-color:#d9d2f8;background:var(--evo-soft);color:#382e72}.ce-lc-message[data-sender=user] .ce-lc-message__body{border-color:#c7e8d7;background:var(--human-soft);color:#1c5e47}.ce-lc-event{display:flex;gap:9px;align-items:center;margin:14px 0;color:#748399;font-size: 11px;text-align:center}.ce-lc-event:before,.ce-lc-event:after{height:1px;flex:1;background:#dce3ec;content:""}.ce-lc-event strong{padding:4px 8px;border-radius:999px;background:#fff}.ce-lc-typing{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:9px 0}.ce-lc-typing__bubble{width:fit-content;display:flex;gap:8px;align-items:center;border:1px solid #d9d2f8;border-radius:14px;padding:9px 12px;background:var(--evo-soft);color:#62588e;font-size: 11px}.ce-lc-dots{display:inline-flex;gap:3px}.ce-lc-dots i{width:5px;height:5px;border-radius:50%;background:#7164b5;animation:ceLcTyping 1.1s infinite ease-in-out}.ce-lc-dots i:nth-child(2){animation-delay:.13s}.ce-lc-dots i:nth-child(3){animation-delay:.26s}.ce-lc-thread__footer{min-height:76px;padding:12px 16px;border-top:1px solid var(--line);background:#fff}.ce-lc-operator-placeholder{min-height:50px;display:grid;place-items:center;color:#8794a7;font-size:11px}.ce-lc-takeover{min-height:50px;display:flex;gap:14px;align-items:center;justify-content:space-between}.ce-lc-takeover>div{display:flex;flex-direction:column}.ce-lc-takeover strong{font-size:11px}.ce-lc-takeover span{margin-top:3px;color:#8290a3;font-size: 11px}.ce-lc-primary-button,.ce-lc-secondary-button{border-radius:10px;padding:10px 13px;cursor:pointer;font:inherit;font-size: 11px;font-weight:850}.ce-lc-primary-button{border:0;background:var(--human);color:#fff}.ce-lc-secondary-button{border:1px solid #c9d8e8;background:#fff;color:var(--blue)}.ce-lc-user-composer{display:flex;gap:9px;align-items:flex-end}.ce-lc-user-composer textarea{min-height:44px;max-height:110px;flex:1;resize:none;border:1px solid #c8d7e7;border-radius:11px;outline:0;padding:10px 11px;font:inherit;font-size:11px}.ce-lc-user-composer textarea:focus{border-color:#5ca0e6;box-shadow:0 0 0 3px rgba(24,138,240,.08)}.ce-lc-user-composer__actions{display:flex;flex-direction:column;gap:5px}.ce-lc-details__header{padding:0 16px}.ce-lc-details__body{padding:8px 15px}.ce-lc-detail{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf1f5}.ce-lc-detail span{color:#7d8a9d;font-size: 11px}.ce-lc-detail strong{max-width:155px;overflow:hidden;font-size: 11px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.ce-lc-session-code{padding-top:14px}.ce-lc-session-code span{display:block;margin-bottom:5px;color:#7d8a9d;font-size: 11px}.ce-lc-session-code code{display:block;overflow:hidden;padding:9px;border-radius:9px;background:#f2f5f8;color:#5f6e83;font-size: 11px;text-overflow:ellipsis;white-space:nowrap}
.ce-lc-launcher{position:fixed;right:24px;bottom:24px;z-index:99990;display:inline-flex;gap:10px;align-items:center;border:0;border-radius:999px;padding:9px 16px 9px 9px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 17px 40px rgba(17,75,155,.3);cursor:pointer;font:inherit}.ce-lc-launcher__avatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#fff}.ce-lc-launcher__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-launcher>span:last-child{display:flex;flex-direction:column;align-items:flex-start}.ce-lc-launcher strong{font-size:12px}.ce-lc-launcher small{margin-top:2px;color:rgba(255,255,255,.75);font-size: 11px}.ce-lc-widget{position:fixed;right:24px;bottom:24px;z-index:99991;width:min(410px,calc(100vw - 28px));height:min(660px,calc(100vh - 48px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(17,75,155,.14);border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(20,34,57,.25);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .16s,transform .16s,visibility .16s}.ce-lc-widget.is-open{opacity:1;visibility:visible;transform:none}.ce-lc-widget__header{min-height:70px;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;padding:10px 12px;color:#fff;background:radial-gradient(circle at 90% 0%,rgba(255,255,255,.15),transparent 35%),linear-gradient(135deg,#12458b,#187de0)}.ce-lc-widget__back,.ce-lc-widget__close{width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:17px}.ce-lc-widget__brand{min-width:0;display:flex;gap:9px;align-items:center}.ce-lc-widget__avatar{width:39px;height:39px;display:grid;flex:0 0 auto;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.55);border-radius:50%;background:#fff;color:var(--blue);font-size: 11px;font-weight:900}.ce-lc-widget__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-widget__brand>div:last-child{min-width:0;display:flex;flex-direction:column}.ce-lc-widget__brand strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-widget__brand span{display:flex;gap:6px;align-items:center;margin-top:3px;color:rgba(255,255,255,.83);font-size: 11px}.ce-lc-widget__brand span i{width:7px;height:7px;border-radius:50%;background:#75f0ae}.ce-lc-widget-screen{min-height:0;flex:1;display:none;flex-direction:column;background:#fff}.ce-lc-widget-screen.is-active{display:flex}
.ce-lc-identify{min-height:100%;display:flex;flex-direction:column;padding:28px 25px 22px;background:radial-gradient(circle at 50% 0%,rgba(24,138,240,.08),transparent 36%),#fff}.ce-lc-identify__avatar{width:66px;height:66px;overflow:hidden;margin-bottom:18px;border:1px solid #d7e5f5;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(17,75,155,.1)}.ce-lc-identify__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-identify__intro{margin-bottom:21px}.ce-lc-identify__eyebrow{display:block;margin-bottom:5px;color:var(--blue);font-size: 11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.ce-lc-identify__intro>strong{display:block;font-size:22px;letter-spacing:-.02em}.ce-lc-identify__intro p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.ce-lc-identify__form{display:grid;gap:13px}.ce-lc-identify__form label{display:grid;gap:6px}.ce-lc-identify__form label>span{color:#4e5e74;font-size: 11px;font-weight:800}.ce-lc-identify__form input{width:100%;height:45px;border:1px solid #cedae8;border-radius:11px;outline:0;padding:0 12px;background:#fff;color:var(--ink);font:inherit;font-size:12px}.ce-lc-identify__form input:focus{border-color:#5aa1e8;box-shadow:0 0 0 3px rgba(24,138,240,.08)}.ce-lc-identify__error{padding:9px 10px;border:1px solid #f2cbcb;border-radius:9px;background:#fff3f3;color:#a33b3b;font-size: 11px}.ce-lc-identify__submit{min-height:45px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;cursor:pointer;font:inherit;font-size:11px;font-weight:850}.ce-lc-identify__submit:disabled{opacity:.55;cursor:wait}.ce-lc-identify__note{display:block;margin-top:auto;padding-top:18px;color:#9aa5b4;font-size: 11px;line-height:1.45}
.ce-lc-widget__messages{flex:1;overflow:auto;padding:17px 14px 18px;background:linear-gradient(180deg,#f8fbff 0,#fff 110px);scroll-behavior:smooth}.ce-lc-widget-welcome{display:flex;gap:10px;align-items:center;max-width:92%;margin:2px auto 18px;padding:11px 12px;border:1px solid #d9d2f8;border-radius:14px;background:var(--evo-soft)}.ce-lc-widget-welcome__avatar{width:34px;height:34px;flex:0 0 auto;overflow:hidden;border-radius:50%;background:#fff}.ce-lc-widget-welcome__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-widget-welcome strong,.ce-lc-widget-welcome span{display:block}.ce-lc-widget-welcome strong{color:#44388e;font-size:11px}.ce-lc-widget-welcome span{margin-top:2px;color:#6f6595;font-size: 11px}.ce-lc-widget-message{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}.ce-lc-widget-message[data-sender=visitor]{flex-direction:row-reverse}.ce-lc-widget-message__avatar{width:30px;height:30px;display:grid;flex:0 0 auto;place-items:center;overflow:hidden;border-radius:50%;background:#dcebfc;color:var(--blue);font-size: 11px;font-weight:900}.ce-lc-widget-message__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-widget-message[data-sender=agent] .ce-lc-widget-message__avatar{border:1px solid #d9d2f8;background:#fff}.ce-lc-widget-message[data-sender=user] .ce-lc-widget-message__avatar{background:#dcf3e7;color:var(--human)}.ce-lc-widget-message__content{max-width:82%}.ce-lc-widget-message__name{display:block;margin:0 0 4px 2px;color:#768398;font-size: 11px;font-weight:800}.ce-lc-widget-message[data-sender=visitor] .ce-lc-widget-message__name{margin-right:2px;text-align:right}.ce-lc-widget-bubble{border:1px solid #d9d2f8;border-radius:14px 14px 14px 5px;padding:10px 12px;background:var(--evo-soft);color:#3e3478;font-size:12px;line-height:1.48;white-space:pre-wrap;word-break:break-word}.ce-lc-widget-message[data-sender=visitor] .ce-lc-widget-bubble{border-color:transparent;border-radius:14px 14px 5px 14px;background:linear-gradient(135deg,var(--blue),#1968c8);color:#fff}.ce-lc-widget-message[data-sender=user] .ce-lc-widget-bubble{border-color:#c5e7d6;background:var(--human-soft);color:#195a43}.ce-lc-widget-event{display:flex;gap:7px;align-items:center;margin:14px 0;color:#758398;font-size: 11px;text-align:center}.ce-lc-widget-event:before,.ce-lc-widget-event:after{height:1px;flex:1;background:#e4e9ef;content:""}.ce-lc-widget-event strong{padding:4px 7px;border-radius:999px;background:#f2f7f4;color:#3c705d}.ce-lc-widget-typing{display:flex;gap:8px;align-items:center;margin:5px 0 12px}.ce-lc-widget-typing__avatar{width:30px;height:30px;overflow:hidden;border:1px solid #d9d2f8;border-radius:50%;background:#fff}.ce-lc-widget-typing__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-widget-typing__bubble{display:flex;gap:8px;align-items:center;padding:9px 11px;border:1px solid #d9d2f8;border-radius:13px 13px 13px 5px;background:var(--evo-soft);color:#6c6295;font-size: 11px}.ce-lc-widget__status{min-height:28px;display:flex;gap:6px;align-items:center;padding:7px 14px 0;border-top:1px solid var(--line);color:#8190a2;font-size: 11px}.ce-lc-widget__status i{width:6px;height:6px;border-radius:50%;background:#19a56c}.ce-lc-widget__status.is-thinking i{background:#d39800;animation:ceLcPulse .9s infinite alternate}.ce-lc-widget__composer{display:flex;gap:8px;align-items:flex-end;padding:9px 11px 11px}.ce-lc-widget__composer textarea{min-height:45px;max-height:112px;flex:1;resize:none;border:1px solid #cedae8;border-radius:12px;outline:0;padding:11px 12px;background:#fff;color:var(--ink);font:inherit;font-size:12px;line-height:1.4}.ce-lc-widget__composer textarea:focus{border-color:#5aa1e8;box-shadow:0 0 0 3px rgba(24,138,240,.08)}.ce-lc-widget__composer button{width:45px;height:45px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;cursor:pointer;font-size:17px}.ce-lc-widget__composer button:disabled{opacity:.5;cursor:wait}.ce-lc-widget__powered{padding:0 0 9px;color:#a0abba;text-align:center;font-size: 11px}.ce-lc-widget-sending{display:block;margin-top:4px;color:#98a4b4;font-size: 11px;text-align:right}
.ce-lc-inbox-hero{padding:21px 18px 16px;border-bottom:1px solid var(--line);background:#f8fbff}.ce-lc-inbox-hero strong,.ce-lc-inbox-hero span{display:block}.ce-lc-inbox-hero strong{font-size:16px}.ce-lc-inbox-hero span{margin-top:4px;color:var(--muted);font-size: 11px;line-height:1.45}.ce-lc-new-chat{display:flex;gap:10px;align-items:center;margin:14px 13px 9px;padding:11px 12px;border:1px solid #c9dcf2;border-radius:12px;background:#eef6ff;color:var(--blue);cursor:pointer;font:inherit;font-size:11px;font-weight:850;text-align:left}.ce-lc-new-chat span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#d8ebff;font-size:15px}.ce-lc-widget-conversations{flex:1;overflow:auto;padding:3px 9px 14px}.ce-lc-widget-conversation{width:100%;display:grid;grid-template-columns:39px minmax(0,1fr);gap:10px;align-items:center;margin-top:4px;padding:10px;border:1px solid transparent;border-radius:12px;background:#fff;color:inherit;cursor:pointer;text-align:left}.ce-lc-widget-conversation:hover{border-color:#d9e3ef;background:#f9fbfd}.ce-lc-widget-conversation.is-current{border-color:#a9cdf3;background:#eef6ff}.ce-lc-widget-conversation__avatar{width:39px;height:39px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#fff;color:var(--blue);font-size: 11px;font-weight:900}.ce-lc-widget-conversation__avatar img{width:100%;height:100%;object-fit:cover}.ce-lc-widget-conversation__content{min-width:0}.ce-lc-widget-conversation__top{display:flex;gap:8px;align-items:center;justify-content:space-between}.ce-lc-widget-conversation__top strong{min-width:0;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-widget-conversation__top time{flex:0 0 auto;color:#9aa5b4;font-size: 11px}.ce-lc-widget-conversation__preview{display:block;overflow:hidden;margin-top:4px;color:#6e7d91;font-size: 11px;text-overflow:ellipsis;white-space:nowrap}.ce-lc-widget-current{display:inline-flex!important;width:fit-content;margin-top:5px!important;padding:2px 6px;border-radius:999px;background:#d9ebff;color:#155baa!important;font-size: 11px!important;font-weight:900;letter-spacing:.06em}.ce-lc-widget-inbox-empty{display:grid;justify-items:center;gap:5px;padding:44px 20px;color:#8190a3;text-align:center}.ce-lc-widget-inbox-empty strong{color:#526176;font-size:11px}.ce-lc-widget-inbox-empty span{font-size: 11px}
@keyframes ceLcTyping{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}}@keyframes ceLcPulse{from{opacity:.45}to{opacity:1}}@media(max-width:1120px){.ce-lc-workspace{grid-template-columns:270px minmax(460px,1fr)}.ce-lc-details{display:none}}@media(max-width:760px){.ce-lc-app__header{align-items:flex-start;flex-direction:column}.ce-lc-workspace{grid-template-columns:1fr}.ce-lc-sidebar{display:none}.ce-lc-widget{right:14px;bottom:14px;width:calc(100vw - 28px);height:calc(100vh - 28px)}}
/* v0.7.1 persona distinction */
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__avatar {
border: 2px solid #BFE5D4;
background: #FFFFFF;
}
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__name {
color: #1D6A4D;
}
.ce-lc-widget-message[data-sender="agent"] .ce-lc-widget-message__name {
color: #5B4CB3;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-message__name {
color: #2D5C91;
}
/* =========================================================
* v0.7.2
* ========================================================= */
.ce-lc-widget-message.is-optimistic {
opacity: .76;
}
/*
* This Lab page is a presentation.
* When the visitor widget is open, reserve actual right-side
* screen space for it so Conversation Details remain visible.
*/
@media (min-width: 1280px) {
.ce-lc.is-widget-open .ce-lc-app {
width: calc(100% - 435px);
min-width: 790px;
transition: width .18s ease;
}
.ce-lc:not(.is-widget-open) .ce-lc-app {
width: 100%;
transition: width .18s ease;
}
.ce-lc.is-widget-open .ce-lc-workspace {
grid-template-columns:
205px
minmax(330px, 1fr)
215px;
}
.ce-lc.is-widget-open .ce-lc-app__header {
min-height: 94px;
padding: 15px 18px;
}
.ce-lc.is-widget-open .ce-lc-app__header h1 {
font-size: 26px;
}
.ce-lc.is-widget-open .ce-lc-app__header p {
max-width: 620px;
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-conversation {
grid-template-columns: 34px minmax(0,1fr);
gap: 8px;
padding: 8px;
}
.ce-lc.is-widget-open .ce-lc-profile {
width: 34px;
height: 34px;
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-conversation__top strong {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-conversation__preview,
.ce-lc.is-widget-open .ce-lc-owner {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-conversation__top time {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-thread__messages {
padding: 15px 13px 22px;
}
.ce-lc.is-widget-open .ce-lc-message {
grid-template-columns: 34px minmax(0,1fr);
gap: 8px;
}
.ce-lc.is-widget-open .ce-lc-message__body {
max-width: 92%;
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-details {
display: block;
}
.ce-lc.is-widget-open .ce-lc-details__header {
padding: 0 11px;
}
.ce-lc.is-widget-open .ce-lc-details__header strong {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-details__body {
padding: 4px 10px;
}
.ce-lc.is-widget-open .ce-lc-detail {
gap: 6px;
padding: 7px 0;
}
.ce-lc.is-widget-open .ce-lc-detail span,
.ce-lc.is-widget-open .ce-lc-detail strong {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-detail strong {
max-width: 112px;
}
.ce-lc.is-widget-open .ce-lc-session-code {
padding-top: 9px;
}
.ce-lc.is-widget-open .ce-lc-session-code span,
.ce-lc.is-widget-open .ce-lc-session-code code {
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-session-code code {
padding: 7px;
}
}
/*
* Each chat pane handles its own scrolling without forcing
* the whole WordPress page to jump.
*/
.ce-lc-thread__messages,
.ce-lc-conversation-list,
.ce-lc-widget__messages,
.ce-lc-widget-conversations {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* =========================================================
* v0.8.0
* Public operator + real scroll behavior
* ========================================================= */
/*
* Use grid tracks rather than hard-coded child heights.
* Every pane can scroll correctly without locking the document.
*/
.ce-lc-workspace {
height:
clamp(
520px,
calc(100vh - 250px),
680px
);
min-height: 520px;
}
.ce-lc-sidebar {
display: grid;
grid-template-rows:
62px
minmax(0, 1fr);
min-height: 0;
}
.ce-lc-thread {
min-height: 0;
}
.ce-lc-details {
display: grid;
grid-template-rows:
62px
minmax(0, 1fr);
min-height: 0;
}
.ce-lc-conversation-list {
height: auto !important;
min-height: 0;
overflow-y: auto !important;
overscroll-behavior: auto !important;
touch-action: pan-y;
}
.ce-lc-thread__messages {
min-height: 0;
overflow-y: auto !important;
overscroll-behavior: auto !important;
touch-action: pan-y;
scrollbar-gutter: stable;
}
.ce-lc-details__body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: auto;
}
.ce-lc-widget__messages,
.ce-lc-widget-conversations {
overscroll-behavior: auto !important;
}
/*
* Remove the v0.7.2 scroll-chain trap explicitly.
* At the end of an inner pane, wheel/trackpad scrolling can
* continue naturally into the WordPress page.
*/
.ce-lc-thread__messages,
.ce-lc-conversation-list,
.ce-lc-widget__messages,
.ce-lc-widget-conversations {
overscroll-behavior-y: auto !important;
}
/*
* Human-control presentation is intentionally green and obvious.
*/
.ce-lc-thread-mode.is-human {
background: #E7F8F0;
color: #11734F;
}
.ce-lc-conversation.is-human {
border-left: 3px solid #15835D;
}
/* =========================================================
* v0.8.1 PERFORMANCE + ACTION FEEDBACK
* ========================================================= */
.ce-lc-thread__messages,
.ce-lc-conversation-list,
.ce-lc-widget__messages,
.ce-lc-widget-conversations,
.ce-lc-details__body {
scroll-behavior: auto !important;
}
/* Visible processing state instead of a dead-looking click. */
.ce-lc-process-state {
min-height: 50px;
display: flex;
gap: 11px;
align-items: center;
padding: 7px 2px;
}
.ce-lc-process-state > div {
display: flex;
flex-direction: column;
}
.ce-lc-process-state strong {
font-size: 11px;
}
.ce-lc-process-state span:not(.ce-lc-process-spinner) {
margin-top: 2px;
color: #8290A3;
font-size: 11px;
}
.ce-lc-process-spinner {
width: 19px;
height: 19px;
flex: 0 0 auto;
border: 2px solid #D8E8E1;
border-top-color: #15835D;
border-radius: 50%;
animation: ceLcSpinFast .65s linear infinite;
}
.ce-lc-primary-button:disabled,
.ce-lc-secondary-button:disabled,
.ce-lc-icon-button:disabled {
cursor: wait;
opacity: .64;
}
.ce-lc-icon-button.is-loading {
animation: ceLcSpinFast .7s linear infinite;
}
.ce-lc-widget__composer button.is-busy {
position: relative;
color: transparent;
}
.ce-lc-widget__composer button.is-busy::after {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #FFFFFF;
content: "…";
font-size: 19px;
font-weight: 900;
}
.ce-lc-widget__status.is-thinking {
font-weight: 750;
}
.ce-lc-widget__status.is-thinking span {
color: #8A6500;
}
/*
* Keep each internal pane scrollable, but never trap the page.
* JS explicitly hands wheel movement to the document at pane edges.
*/
.ce-lc-thread,
.ce-lc-sidebar,
.ce-lc-details {
overflow: hidden;
}
.ce-lc-thread__messages,
.ce-lc-conversation-list,
.ce-lc-details__body {
height: 100%;
max-height: 100%;
overflow-y: auto !important;
}
@keyframes ceLcSpinFast {
to {
transform: rotate(360deg);
}
}
/* =========================================================
* v0.8.2 MESSAGE TYPOGRAPHY / PRESENTATION NORMALIZATION
* ========================================================= */
/*
* GeneratePress / page-level typography must never decide chat alignment.
* Each speaker owns its own layout explicitly.
*/
.ce-lc-message,
.ce-lc-message__content,
.ce-lc-message__meta,
.ce-lc-message__body,
.ce-lc-widget-message,
.ce-lc-widget-message__content,
.ce-lc-widget-message__name,
.ce-lc-widget-bubble {
text-align: left !important;
}
.ce-lc-message__content {
min-width: 0;
}
.ce-lc-message__body {
width: fit-content;
max-width: min(76%, 720px) !important;
margin-right: auto;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: normal;
}
.ce-lc-widget-message__content {
min-width: 0;
max-width: 78% !important;
display: flex;
flex-direction: column;
}
.ce-lc-widget-message[data-sender="agent"] .ce-lc-widget-message__content,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__content {
align-items: flex-start;
margin-right: auto;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-message__content {
align-items: flex-end;
margin-left: auto;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-message__name {
text-align: right !important;
}
.ce-lc-widget-bubble {
width: fit-content;
max-width: 100%;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: normal;
}
.ce-lc-message-link {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
.ce-lc-message-link:hover {
opacity: .82;
}
@media (min-width: 1280px) {
.ce-lc.is-widget-open .ce-lc-message__body {
max-width: min(90%, 660px) !important;
}
}
/* =========================================================
* v0.8.3 CHAT MESSAGE LAYOUT
* Normal chat rhythm, no inherited centering, no preserved
* AI hard-wrap whitespace.
* ========================================================= */
.ce-lc-message,
.ce-lc-message__content,
.ce-lc-message__meta,
.ce-lc-message__body,
.ce-lc-widget-message,
.ce-lc-widget-message__content,
.ce-lc-widget-message__name,
.ce-lc-widget-bubble,
.ce-lc-widget-bubble *,
.ce-lc-message__body * {
text-align: left !important;
text-indent: 0 !important;
letter-spacing: normal;
}
/* ---------- backend conversation ---------- */
.ce-lc-message {
align-items: start;
}
.ce-lc-message__content {
width: 100%;
min-width: 0;
}
.ce-lc-message__body {
display: block;
width: fit-content !important;
max-width: min(68ch, 82%) !important;
margin: 0 auto 0 0 !important;
padding: 10px 13px;
font-size: 12px;
line-height: 1.55;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
.ce-lc-message__meta {
justify-content: flex-start;
}
/* ---------- visitor popup ---------- */
.ce-lc-widget-message {
width: 100%;
align-items: flex-start !important;
gap: 9px;
margin-bottom: 15px;
}
.ce-lc-widget-message[data-sender="visitor"] {
flex-direction: row-reverse;
}
.ce-lc-widget-message__avatar {
margin-top: 17px;
}
.ce-lc-widget-message__content {
width: auto;
min-width: 0;
max-width: 79% !important;
display: flex;
flex-direction: column;
}
.ce-lc-widget-message[data-sender="agent"] .ce-lc-widget-message__content,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__content {
align-items: flex-start !important;
margin-right: auto;
margin-left: 0;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-message__content {
align-items: flex-end !important;
margin-left: auto;
margin-right: 0;
}
.ce-lc-widget-message__name {
width: 100%;
margin: 0 0 5px 2px;
line-height: 1.2;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-message__name {
margin-left: 0;
margin-right: 2px;
text-align: right !important;
}
.ce-lc-widget-bubble {
display: block;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 10px 12px;
font-size: 12px;
line-height: 1.55;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
/*
* A long Evo answer should be readable, but should not become
* a giant full-width card.
*/
.ce-lc-widget-message[data-sender="agent"] .ce-lc-widget-bubble,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-bubble {
max-width: 310px !important;
}
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-bubble {
max-width: 290px !important;
}
/* Paragraph spacing created by
, not theme paragraph margins. */
.ce-lc-widget-bubble p,
.ce-lc-message__body p {
margin: 0 !important;
}
/* Old/current links stay readable inside both bubble types. */
.ce-lc-message-link {
display: inline;
white-space: normal;
overflow-wrap: anywhere;
}
/* In presentation mode keep backend messages compact and readable. */
@media (min-width: 1280px) {
.ce-lc.is-widget-open .ce-lc-message__body {
max-width: min(64ch, 88%) !important;
}
}
/* Smaller screens */
@media (max-width: 560px) {
.ce-lc-widget-message__content {
max-width: 84% !important;
}
.ce-lc-widget-message[data-sender="agent"] .ce-lc-widget-bubble,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-bubble,
.ce-lc-widget-message[data-sender="visitor"] .ce-lc-widget-bubble {
max-width: 100% !important;
}
}
/* =========================================================
* v0.8.4 MASTER UI / RESPONSIVE / LOADING PASS
* ========================================================= */
.ce-lc {
font-size: 16px;
}
/* Loading / connection */
.ce-lc-connected {
min-height: 38px;
padding: 9px 14px;
font-size: 12px;
}
.ce-lc-connected.is-loading i {
width: 13px;
height: 13px;
border: 2px solid #D6E4EF;
border-top-color: #1689E8;
background: transparent;
box-shadow: none;
animation: ceLcUiSpin .7s linear infinite;
}
.ce-lc-connected.is-error {
border-color: #F1C7C7;
background: #FFF7F7;
color: #A33C3C;
}
.ce-lc-connected.is-error i {
background: #D84C4C;
box-shadow: 0 0 0 4px rgba(216,76,76,.10);
}
.ce-lc-loading-label {
display: flex;
gap: 9px;
align-items: center;
margin: 5px 5px 12px;
color: #62738A;
font-size: 12px;
font-weight: 750;
}
.ce-lc-mini-spinner {
width: 15px;
height: 15px;
display: inline-block;
flex: 0 0 auto;
border: 2px solid #D8E5F2;
border-top-color: #1B7DDA;
border-radius: 50%;
animation: ceLcUiSpin .7s linear infinite;
}
.ce-lc-inbox-loading {
padding: 4px;
}
.ce-lc-skeleton-conversation {
display: grid;
grid-template-columns: 46px minmax(0,1fr);
gap: 11px;
align-items: center;
margin-bottom: 7px;
padding: 12px;
border: 1px solid #E9EEF4;
border-radius: 14px;
background: #FFFFFF;
}
.ce-lc-skeleton-conversation > span {
width: 46px;
height: 46px;
border-radius: 50%;
background: #EDF2F7;
}
.ce-lc-skeleton-conversation > div {
display: grid;
gap: 7px;
}
.ce-lc-skeleton-conversation i,
.ce-lc-skeleton-conversation b,
.ce-lc-skeleton-conversation em,
.ce-lc-skeleton-message i,
.ce-lc-skeleton-message b {
display: block;
border-radius: 999px;
background:
linear-gradient(
90deg,
#EDF2F7 0%,
#F8FAFC 50%,
#EDF2F7 100%
);
background-size: 220% 100%;
animation: ceLcSkeleton 1.15s ease-in-out infinite;
}
.ce-lc-skeleton-conversation i {
width: 48%;
height: 10px;
}
.ce-lc-skeleton-conversation b {
width: 76%;
height: 8px;
}
.ce-lc-skeleton-conversation em {
width: 35%;
height: 7px;
}
.ce-lc-thread-loading {
min-height: 100%;
padding: 22px 24px;
}
.ce-lc-thread-loading__status {
display: flex;
gap: 11px;
align-items: center;
margin-bottom: 24px;
padding: 13px 15px;
border: 1px solid #DCE8F4;
border-radius: 13px;
background: #FFFFFF;
}
.ce-lc-thread-loading__status > div {
display: flex;
flex-direction: column;
}
.ce-lc-thread-loading__status strong {
font-size: 13px;
}
.ce-lc-thread-loading__status span:not(.ce-lc-mini-spinner) {
margin-top: 2px;
color: #7B899B;
font-size: 11px;
}
.ce-lc-skeleton-message {
display: grid;
grid-template-columns: 44px minmax(0,1fr);
gap: 12px;
margin: 16px 0;
}
.ce-lc-skeleton-message > span {
width: 44px;
height: 44px;
border-radius: 50%;
background: #E7EFF8;
}
.ce-lc-skeleton-message > div {
display: grid;
align-content: start;
gap: 8px;
}
.ce-lc-skeleton-message i {
width: 120px;
height: 9px;
}
.ce-lc-skeleton-message b {
width: min(520px, 72%);
height: 48px;
border-radius: 14px;
}
.ce-lc-skeleton-message.is-short b {
width: min(300px, 44%);
}
.ce-lc-operator-placeholder--loading {
display: flex;
gap: 9px;
align-items: center;
}
.ce-lc-details__body.is-loading {
opacity: .68;
}
/* Desktop */
@media (min-width: 821px) {
.ce-lc-workspace {
grid-template-columns:
310px
minmax(470px, 1fr)
360px;
height:
clamp(
610px,
calc(100vh - 220px),
760px
);
}
.ce-lc-sidebar__header,
.ce-lc-details__header,
.ce-lc-thread__header {
height: 70px;
}
.ce-lc-thread {
grid-template-rows:
70px
minmax(0,1fr)
auto;
}
.ce-lc-sidebar__header {
padding: 0 18px;
}
.ce-lc-sidebar__header strong,
.ce-lc-details__header strong {
font-size: 15px;
}
.ce-lc-sidebar__header span {
margin-top: 3px;
font-size: 11px;
}
.ce-lc-conversation-list {
padding: 10px;
}
.ce-lc-conversation {
grid-template-columns:
46px
minmax(0,1fr);
gap: 11px;
margin-bottom: 7px;
padding: 12px;
border-radius: 14px;
}
.ce-lc-profile {
width: 46px;
height: 46px;
font-size: 12px;
}
.ce-lc-conversation__top strong {
font-size: 13px;
}
.ce-lc-conversation__top time {
font-size: 11px;
}
.ce-lc-conversation__preview {
margin-top: 5px;
font-size: 11.5px;
}
.ce-lc-owner {
font-size: 10.5px;
}
.ce-lc-conversation__new {
padding: 4px 8px;
font-size: 11px;
}
.ce-lc-thread__header {
padding: 0 20px;
}
.ce-lc-thread-avatar {
width: 46px;
height: 46px;
font-size: 12px;
}
.ce-lc-thread-identity {
gap: 12px;
}
.ce-lc-thread-identity strong {
font-size: 15px;
}
.ce-lc-thread-identity span {
margin-top: 4px;
font-size: 11.5px;
}
.ce-lc-thread-mode {
padding: 7px 11px;
font-size: 11px;
}
.ce-lc-thread__messages {
padding: 24px 26px 30px;
}
.ce-lc-message {
grid-template-columns:
46px
minmax(0,1fr);
gap: 12px;
padding: 11px 0;
}
.ce-lc-message__meta {
margin-bottom: 6px;
}
.ce-lc-message__meta strong {
font-size: 12.5px;
}
.ce-lc-message__meta time {
font-size: 10.5px;
}
.ce-lc-message__body {
max-width: min(66ch, 82%) !important;
padding: 11px 14px;
font-size: 13.5px;
line-height: 1.55;
}
.ce-lc-event {
margin: 18px 0;
font-size: 10.5px;
}
.ce-lc-event strong {
padding: 5px 10px;
}
.ce-lc-thread__footer {
min-height: 88px;
padding: 14px 18px;
}
.ce-lc-takeover {
min-height: 58px;
}
.ce-lc-takeover strong {
font-size: 13px;
}
.ce-lc-takeover span {
margin-top: 4px;
font-size: 11px;
}
.ce-lc-primary-button,
.ce-lc-secondary-button {
padding: 11px 15px;
font-size: 11.5px;
}
.ce-lc-user-composer textarea {
min-height: 48px;
padding: 11px 12px;
font-size: 12.5px;
}
.ce-lc-details__header {
padding: 0 18px;
}
.ce-lc-details__body {
padding: 8px 18px 16px;
}
.ce-lc-detail {
gap: 18px;
padding: 13px 0;
}
.ce-lc-detail span {
font-size: 11.5px;
}
.ce-lc-detail strong {
max-width: 215px;
font-size: 12px;
}
.ce-lc-session-code {
padding-top: 16px;
}
.ce-lc-session-code span {
font-size: 10.5px;
}
.ce-lc-session-code code {
padding: 10px;
font-size: 9.5px;
}
}
/* Desktop with visitor chat open */
@media (min-width: 1280px) {
.ce-lc.is-widget-open .ce-lc-app {
width: calc(100% - 430px);
min-width: 0;
}
.ce-lc.is-widget-open .ce-lc-workspace {
grid-template-columns:
220px
minmax(330px, 1fr)
320px;
}
.ce-lc.is-widget-open .ce-lc-details__header {
padding: 0 14px;
}
.ce-lc.is-widget-open .ce-lc-details__header strong {
font-size: 13px;
}
.ce-lc.is-widget-open .ce-lc-details__body {
padding: 6px 14px 14px;
}
.ce-lc.is-widget-open .ce-lc-detail {
padding: 10px 0;
}
.ce-lc.is-widget-open .ce-lc-detail span {
font-size: 10.5px;
}
.ce-lc.is-widget-open .ce-lc-detail strong {
max-width: 185px;
font-size: 11px;
}
.ce-lc.is-widget-open .ce-lc-message__body {
max-width: min(58ch, 90%) !important;
font-size: 12px;
}
}
/* Danny portrait crop inside circular UI */
.ce-lc-profile--human,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__avatar,
.ce-lc-widget__avatar.is-danny {
overflow: hidden;
border-radius: 50%;
background: #D6D9DC;
}
.ce-lc-profile--human img,
.ce-lc-widget-message[data-sender="user"] .ce-lc-widget-message__avatar img,
.ce-lc-widget__avatar.is-danny img {
width: 142% !important;
height: 142% !important;
max-width: none !important;
object-fit: cover;
object-position: 72% 44%;
transform: translate(-4%, -1%);
}
/* Popup readability */
.ce-lc-widget__brand strong {
font-size: 14px;
}
.ce-lc-widget__brand span {
font-size: 10.5px;
}
.ce-lc-widget-message__name {
font-size: 9.5px;
}
.ce-lc-widget-bubble {
padding: 11px 13px;
font-size: 13px;
line-height: 1.55;
}
.ce-lc-widget__status {
min-height: 31px;
font-size: 11px;
}
.ce-lc-widget__composer textarea {
min-height: 48px;
padding: 12px 13px;
font-size: 13px;
}
.ce-lc-widget__composer button {
width: 48px;
height: 48px;
}
/* Tablet / mobile */
@media (max-width: 820px) {
.ce-lc {
font-size: 15px;
}
.ce-lc-app {
border-radius: 16px;
}
.ce-lc-app__header {
min-height: auto;
gap: 14px;
padding: 17px 16px;
}
.ce-lc-app__header h1 {
font-size: 27px;
}
.ce-lc-app__header p {
font-size: 12.5px;
}
.ce-lc-workspace {
display: flex;
height: auto;
min-height: 0;
flex-direction: column;
}
.ce-lc-sidebar {
display: block !important;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.ce-lc-sidebar__header {
height: 60px;
padding: 0 15px;
}
.ce-lc-sidebar__header strong {
font-size: 14px;
}
.ce-lc-sidebar__header span {
font-size: 11px;
}
.ce-lc-conversation-list {
height: auto !important;
min-height: 0;
display: flex;
gap: 8px;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 8px 12px 13px;
scroll-snap-type: x proximity;
}
.ce-lc-conversation {
min-width: 255px;
max-width: 255px;
margin: 0;
scroll-snap-align: start;
}
.ce-lc-thread {
height: min(620px, 72vh);
min-height: 520px;
grid-template-rows:
66px
minmax(0,1fr)
auto;
}
.ce-lc-thread__header {
height: 66px;
padding: 0 15px;
}
.ce-lc-thread-identity strong {
font-size: 14px;
}
.ce-lc-thread-identity span {
font-size: 11px;
}
.ce-lc-thread__messages {
padding: 18px 15px 24px;
}
.ce-lc-message {
grid-template-columns:
42px
minmax(0,1fr);
gap: 10px;
}
.ce-lc-message__body {
max-width: 92% !important;
font-size: 13px;
}
.ce-lc-thread__footer {
padding: 12px 14px;
}
.ce-lc-details {
display: block !important;
border-left: 0;
border-top: 1px solid var(--line);
}
.ce-lc-details__header {
height: 58px;
padding: 0 15px;
}
.ce-lc-details__header strong {
font-size: 14px;
}
.ce-lc-details__body {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 0 18px;
max-height: none !important;
overflow: visible !important;
padding: 5px 15px 18px;
}
.ce-lc-detail {
padding: 11px 0;
}
.ce-lc-detail span {
font-size: 11px;
}
.ce-lc-detail strong {
max-width: 145px;
font-size: 11.5px;
}
.ce-lc-session-code {
grid-column: 1 / -1;
}
.ce-lc-widget {
right: 8px;
bottom: 8px;
width: calc(100vw - 16px);
height: calc(100dvh - 16px);
max-height: none;
border-radius: 18px;
}
.ce-lc-widget__header {
min-height: 68px;
}
.ce-lc-widget-message__content {
max-width: 84% !important;
}
.ce-lc-widget-bubble {
font-size: 13.5px;
}
.ce-lc-launcher {
right: 12px;
bottom: 12px;
}
}
@media (max-width: 520px) {
.ce-lc-details__body {
grid-template-columns: 1fr;
}
.ce-lc-detail strong {
max-width: 58%;
}
.ce-lc-session-code {
grid-column: auto;
}
.ce-lc-conversation {
min-width: 235px;
max-width: 235px;
}
.ce-lc-thread {
min-height: 540px;
}
.ce-lc-message__body {
max-width: 96% !important;
}
.ce-lc-takeover {
align-items: stretch;
flex-direction: column;
}
.ce-lc-primary-button {
width: 100%;
}
.ce-lc-user-composer {
align-items: stretch;
flex-direction: column;
}
.ce-lc-user-composer__actions {
flex-direction: row;
}
.ce-lc-user-composer__actions button {
flex: 1;
}
}
@keyframes ceLcUiSpin {
to {
transform: rotate(360deg);
}
}
@keyframes ceLcSkeleton {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
/* =========================================================
* v0.9.0 MOBILE CONTROL CENTER
* ========================================================= */
.ce-lc-mobile-nav,
.ce-lc-mobile-back,
.ce-lc-conversation__open {
display: none;
}
@media (max-width: 820px) {
.ce-lc-app {
overflow: visible;
border-radius: 18px;
}
.ce-lc-app__header {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: 10px;
padding: 14px 15px;
}
.ce-lc-eyebrow {
font-size: 11px;
letter-spacing: .13em;
}
.ce-lc-app__header h1 {
margin-top: 3px;
font-size: 23px;
line-height: 1.08;
}
.ce-lc-app__header p {
display: none;
}
.ce-lc-connected {
min-height: 34px;
padding: 7px 10px;
font-size: 11px;
white-space: nowrap;
}
.ce-lc-mobile-nav {
position: sticky;
z-index: 20;
top: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 6px;
padding: 8px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ce-lc-mobile-nav__button {
min-width: 0;
min-height: 50px;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
justify-content: center;
padding: 7px 5px;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: #607087;
font: inherit;
}
.ce-lc-mobile-nav__button span {
font-size: 12px;
font-weight: 800;
}
.ce-lc-mobile-nav__button small {
max-width: 100%;
overflow: hidden;
color: #91A0B4;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-lc-mobile-nav__button.is-active {
border-color: #BDD9F8;
background: #EAF4FF;
color: #0F4F94;
}
.ce-lc-mobile-nav__button.is-active small {
color: #3975AF;
}
.ce-lc-workspace {
display: block !important;
height: auto !important;
min-height: 0 !important;
}
.ce-lc [data-ce-lc-mobile-panel-section] {
display: none !important;
}
.ce-lc[data-mobile-panel="inbox"] [data-ce-lc-mobile-panel-section="inbox"] {
display: block !important;
}
.ce-lc[data-mobile-panel="chat"] [data-ce-lc-mobile-panel-section="chat"] {
display: grid !important;
}
.ce-lc[data-mobile-panel="details"] [data-ce-lc-mobile-panel-section="details"] {
display: block !important;
}
/* INBOX */
.ce-lc-sidebar {
border: 0;
}
.ce-lc-sidebar__header {
height: 62px;
padding: 0 16px;
border-bottom: 1px solid var(--line);
}
.ce-lc-sidebar__header strong {
font-size: 17px;
}
.ce-lc-sidebar__header span {
font-size: 11px;
}
.ce-lc-icon-button {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 20px;
}
.ce-lc-conversation-list {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 10px 10px 16px;
}
.ce-lc-conversation {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
display: grid;
grid-template-columns: 50px minmax(0,1fr);
gap: 12px;
margin: 0 0 9px !important;
padding: 13px 12px;
border: 1px solid #E2EAF2;
border-radius: 15px;
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(31,65,98,.035);
text-align: left;
}
.ce-lc-conversation.is-active {
border-color: #7FB7F2;
background: #EFF7FF;
}
.ce-lc-conversation.is-new {
border-left-width: 4px;
border-left-color: #E2A02A;
}
.ce-lc-conversation .ce-lc-profile {
width: 50px;
height: 50px;
font-size: 12px;
}
.ce-lc-conversation__top strong {
font-size: 14px !important;
}
.ce-lc-conversation__top time {
font-size: 11px !important;
}
.ce-lc-conversation__preview {
display: -webkit-box;
margin-top: 5px;
overflow: hidden;
color: #64758C;
font-size: 12px !important;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ce-lc-conversation__bottom {
display: flex;
gap: 7px;
align-items: center;
margin-top: 8px;
}
.ce-lc-owner {
font-size: 10.5px !important;
}
.ce-lc-conversation__open {
display: inline;
margin-left: auto;
color: #226AB4;
font-size: 10.5px;
font-weight: 800;
}
/* CHAT */
.ce-lc-thread {
height: min(690px, calc(100dvh - 160px)) !important;
min-height: 560px !important;
grid-template-rows: 72px minmax(0,1fr) auto !important;
border: 0;
}
.ce-lc-thread__header {
position: sticky;
z-index: 5;
top: 67px;
height: 72px !important;
display: grid;
grid-template-columns: 38px minmax(0,1fr) auto;
gap: 9px;
padding: 0 12px !important;
border-bottom: 1px solid var(--line);
background: #FFFFFF;
}
.ce-lc-mobile-back {
width: 36px;
height: 36px;
display: grid;
place-items: center;
align-self: center;
border: 1px solid #D8E4EF;
border-radius: 10px;
background: #F8FBFE;
color: #1A5B9A;
font-size: 21px;
}
.ce-lc-thread-identity {
min-width: 0;
gap: 9px;
}
.ce-lc-thread-avatar {
width: 42px;
height: 42px;
flex: 0 0 auto;
}
.ce-lc-thread-identity > div:last-child {
min-width: 0;
}
.ce-lc-thread-identity strong {
display: block;
overflow: hidden;
font-size: 14px !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-lc-thread-identity span {
display: block;
overflow: hidden;
margin-top: 2px;
font-size: 10.5px !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.ce-lc-thread-mode {
padding: 6px 9px;
font-size: 11px;
}
.ce-lc-thread__messages {
padding: 16px 12px 24px !important;
background: #F8FAFD;
}
.ce-lc-message {
grid-template-columns: 40px minmax(0,1fr);
gap: 9px;
padding: 9px 0;
}
.ce-lc-message .ce-lc-profile {
width: 40px;
height: 40px;
}
.ce-lc-message__body {
max-width: 100% !important;
padding: 10px 12px;
font-size: 13px !important;
line-height: 1.5;
}
.ce-lc-thread__footer {
position: sticky;
bottom: 0;
min-height: 82px;
padding: 12px !important;
background: rgba(255,255,255,.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ce-lc-takeover {
min-height: 0;
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 10px;
align-items: center;
}
.ce-lc-takeover strong {
font-size: 12px;
}
.ce-lc-takeover span {
font-size: 11px;
}
.ce-lc-takeover .ce-lc-primary-button {
width: auto !important;
min-height: 44px;
padding: 9px 14px;
}
/* DETAILS */
.ce-lc-details {
border: 0;
}
.ce-lc-details__header {
height: 62px;
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid var(--line);
}
.ce-lc-details__header strong {
font-size: 17px;
}
.ce-lc-details__body {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px;
padding: 12px !important;
overflow: visible !important;
}
.ce-lc-detail {
display: grid;
grid-template-columns: 120px minmax(0,1fr);
gap: 12px;
align-items: center;
padding: 12px 13px !important;
border: 1px solid #E4EBF2;
border-radius: 12px;
background: #FFFFFF;
}
.ce-lc-detail span {
color: #75879B;
font-size: 11px !important;
}
.ce-lc-detail strong {
max-width: none !important;
overflow-wrap: anywhere;
font-size: 12px !important;
text-align: right;
}
.ce-lc-session-code {
margin-top: 2px;
padding: 13px;
border: 1px solid #E4EBF2;
border-radius: 12px;
background: #FFFFFF;
}
.ce-lc-session-code code {
margin-top: 6px;
padding: 9px;
font-size: 11px;
}
/* Loading */
.ce-lc-thread-loading {
padding: 14px 12px;
}
.ce-lc-thread-loading__status {
margin-bottom: 14px;
padding: 11px 12px;
}
.ce-lc-skeleton-message {
grid-template-columns: 40px minmax(0,1fr);
gap: 9px;
}
.ce-lc-skeleton-message > span {
width: 40px;
height: 40px;
}
/* Launcher */
.ce-lc-launcher {
right: 12px;
bottom: 12px;
min-height: 54px;
}
.ce-lc-launcher strong {
font-size: 12px;
}
.ce-lc-launcher small {
font-size: 11px;
}
}
@media (max-width: 430px) {
.ce-lc-app__header {
grid-template-columns: 1fr;
}
.ce-lc-connected {
width: fit-content;
}
.ce-lc-thread {
height: calc(100dvh - 145px) !important;
}
.ce-lc-detail {
grid-template-columns: 100px minmax(0,1fr);
}
}
/* =========================================================
* v0.9.1 BACKEND MESSAGE SIDES + AVATAR FIX
* Popup message direction is intentionally unchanged.
* ========================================================= */
/* ---------------------------------------------------------
* BACKEND THREAD ONLY
* Visitor = left.
* Evo + human operator = right.
* --------------------------------------------------------- */
.ce-lc-thread__messages .ce-lc-message[data-sender="visitor"] {
grid-template-columns:
46px
minmax(0,1fr);
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="visitor"]
.ce-lc-profile {
grid-column: 1;
grid-row: 1;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="visitor"]
.ce-lc-message__content {
grid-column: 2;
grid-row: 1;
justify-self: start;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="visitor"]
.ce-lc-message__meta {
justify-content: flex-start;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="visitor"]
.ce-lc-message__body {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Evo and human operator on right. */
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"],
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"] {
grid-template-columns:
minmax(0,1fr)
46px;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"]
.ce-lc-profile,
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"]
.ce-lc-profile {
grid-column: 2;
grid-row: 1;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"]
.ce-lc-message__content,
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"]
.ce-lc-message__content {
grid-column: 1;
grid-row: 1;
justify-self: end;
width: min(100%, 760px);
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"]
.ce-lc-message__meta,
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"]
.ce-lc-message__meta {
justify-content: flex-end;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"]
.ce-lc-message__body,
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"]
.ce-lc-message__body {
margin-left: auto !important;
margin-right: 0 !important;
}
/* ---------------------------------------------------------
* New Danny asset is already framed correctly.
* Undo the old 142% zoom that cut off half his face.
* --------------------------------------------------------- */
.ce-lc-profile--human img,
.ce-lc-widget-message[data-sender="user"]
.ce-lc-widget-message__avatar img,
.ce-lc-widget__avatar.is-danny img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
/* Evo is now a proper avatar too. */
.ce-lc-profile--evo img,
.ce-lc-widget-message[data-sender="agent"]
.ce-lc-widget-message__avatar img,
.ce-lc-widget__avatar:not(.is-danny) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ---------------------------------------------------------
* Mobile thread side logic, same rule with smaller avatars.
* --------------------------------------------------------- */
@media (max-width: 820px) {
.ce-lc-thread__messages
.ce-lc-message[data-sender="visitor"] {
grid-template-columns:
40px
minmax(0,1fr);
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"],
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"] {
grid-template-columns:
minmax(0,1fr)
40px;
}
.ce-lc-thread__messages
.ce-lc-message[data-sender="agent"]
.ce-lc-message__content,
.ce-lc-thread__messages
.ce-lc-message[data-sender="user"]
.ce-lc-message__content {
width: 100%;
max-width: 92%;
}
}