/* "Trợ lý ảo X2 OFFICE" (inc/functions/ai-assistant.php, assets/js/x2-ai-pet.js): the robot pet in the bottom-right
   corner (above the contact dock, assets/css/contact-dock.css), opens preset questions answered by AI. Same pet as the sale portal. */
.x2ai{position:fixed;right:20px;bottom:92px;z-index:99990;font-family:inherit;color:#1c2521;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.x2ai>*{pointer-events:auto}
.x2ai-pet{position:relative;width:136px;height:200px;padding:0;border:0;background:none;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
/* Dragged: grabbing, no hop under the cursor; on the left half of the window the chat and bubbles open to the right. */
.x2ai.is-dragging .x2ai-pet{cursor:grabbing}
.x2ai.is-dragging .x2ai-pet__body{animation:none;transform:scale(1.06) rotate(-4deg);transition:transform .15s}
.x2ai.is-left{align-items:flex-start}
.x2ai.is-left .x2ai-bubble{margin:0 0 0 18px;border-radius:14px 14px 14px 4px}
.x2ai.is-left .x2ai-chat{transform-origin:0 100%}
.x2ai.is-top{flex-direction:column-reverse}
.x2ai.is-top .x2ai-chat{max-height:min(600px,calc(100dvh - var(--x2ai-top,20px) - 150px));transform-origin:100% 0}
.x2ai.is-top.is-left .x2ai-chat{transform-origin:0 0}
.x2ai-pet__body{position:absolute;z-index:1;left:8px;top:0;width:120px;height:180px;animation:x2aiFloat 3.2s ease-in-out infinite;transform-origin:50% 80%}
.x2ai-pet:hover .x2ai-pet__body{animation:x2aiHop .7s ease-in-out infinite}
.x2ai.is-open .x2ai-pet__body{animation:x2aiTalk 1.4s ease-in-out infinite}
/* Smaller while the chat is open, so the chat gets the height. */
.x2ai-pet,.x2ai-pet__body{transition:width .25s,height .25s}
.x2ai.is-open .x2ai-pet{width:84px;height:124px}
.x2ai.is-open .x2ai-pet__body{left:6px;width:72px;height:108px}
.x2ai-pet__body img{display:block;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px #1c252130)}
/* The arm layer (forearm + hand) sits where it was cut from (its box in the picture) and waves at the elbow. */
.x2ai-pet__body .x2ai-pet__arm{position:absolute;left:1.66%;top:34.31%;width:26.46%;height:27.21%;object-fit:fill;filter:none;transform-origin:90.4% 81.6%;animation:x2aiWave 5s ease-in-out infinite}
.x2ai-pet:hover .x2ai-pet__arm,.x2ai.is-open .x2ai-pet__arm{animation-duration:1.8s}
@keyframes x2aiWave{0%,42%,100%{transform:rotate(0)}7%{transform:rotate(12deg)}14%{transform:rotate(-8deg)}21%{transform:rotate(12deg)}28%{transform:rotate(-8deg)}35%{transform:rotate(6deg)}}
/* Eyelids: dark patches the colour of the visor over each eye of the picture (x2officeAI.webp), shut for a
   moment every few seconds; a glowing line is the closed eye. */
.x2ai-pet__lid{position:absolute;border-radius:45% 45% 50% 50%;background:#140e0b;box-shadow:0 0 3px 2px #140e0b;transform:scaleY(0);transform-origin:50% 0;animation:x2aiBlink 4.6s ease-in-out infinite}
.x2ai-pet__lid::after{content:"";position:absolute;left:12%;right:12%;bottom:18%;height:28%;border-bottom:2px solid #ffb27d;border-radius:0 0 50% 50%;box-shadow:0 3px 6px -2px #ed6b2d}
.x2ai-pet__lid--l{left:38.8%;top:28.6%;width:11%;height:5.6%}
.x2ai-pet__lid--r{left:59.6%;top:31.2%;width:10.6%;height:5.9%}
@keyframes x2aiBlink{0%,88%,100%{transform:scaleY(0)}90%,91%{transform:scaleY(1)}93%{transform:scaleY(0)}95%,96%{transform:scaleY(1)}98%{transform:scaleY(0)}}
.x2ai-pet__glow{position:absolute;z-index:2;left:53.7%;top:8.4%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle,#fff3e8 0%,#ed6b2d99 45%,transparent 70%);mix-blend-mode:screen;animation:x2aiIdea 2.4s ease-in-out infinite;pointer-events:none}
.x2ai-pet__shadow{position:absolute;left:50%;bottom:4px;width:70px;height:10px;margin-left:-35px;border-radius:50%;background:#1c252126;animation:x2aiShadow 3.2s ease-in-out infinite}
@keyframes x2aiFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes x2aiHop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(1.05,.96)}70%{transform:translateY(0) scale(1.04,.95)}}
@keyframes x2aiTalk{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes x2aiIdea{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@keyframes x2aiShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.7);opacity:.55}}
.x2ai-bubble{position:relative;margin-right:18px;max-width:230px;padding:9px 14px;line-height:1.4;text-align:left;border:1px solid #dfe4dd;border-radius:14px 14px 4px 14px;background:#fff;color:#1c2521;font:inherit;font-size:13px;font-weight:600;box-shadow:0 10px 30px #1c252118;cursor:pointer;animation:x2aiPop .35s ease-out}
@keyframes x2aiPop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.x2ai-chat{width:min(400px,calc(100vw - 32px));max-height:min(600px,calc(100dvh - var(--x2ai-bottom,72px) - 150px));display:flex;flex-direction:column;background:#fff;border:1px solid #dfe4dd;border-radius:18px;box-shadow:0 24px 70px #1c252130;overflow:hidden;animation:x2aiPop .25s ease-out;transform-origin:100% 100%}
.x2ai-chat__head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #dfe4dd;background:linear-gradient(135deg,#fff1e8,#fff)}
.x2ai-chat__head img{width:28px;height:42px;object-fit:contain}
.x2ai-chat__head div{flex:1;min-width:0;display:flex;flex-direction:column}
.x2ai-chat__head b{font-size:15px}
.x2ai-chat__head small{font-size:11.5px;color:#6d7771}
.x2ai-chat__close{width:30px;height:30px;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;color:#6d7771;cursor:pointer}
.x2ai-chat__close:hover{background:#f1f3ef;color:#1c2521}
.x2ai-chat__body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fafaf8}
.x2ai-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.x2ai-msg p{margin:0}.x2ai-msg p+p,.x2ai-msg p+ul,.x2ai-msg ul+p{margin-top:6px}
.x2ai-msg ul{margin:0;padding-left:18px}.x2ai-msg li+li{margin-top:4px}
.x2ai-msg.is-model{align-self:flex-start;background:#fff;border:1px solid #dfe4dd;border-bottom-left-radius:4px}
.x2ai-msg.is-user{align-self:flex-end;background:#ed6b2d;color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.x2ai-msg--typing{display:flex;gap:4px;padding:13px 14px}
.x2ai-msg--typing i{width:7px;height:7px;border-radius:50%;background:#ed6b2d;animation:x2aiDot 1s ease-in-out infinite}
.x2ai-msg--typing i:nth-child(2){animation-delay:.15s}.x2ai-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes x2aiDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.x2ai-chat__tips{display:flex;flex-direction:column;gap:6px}
.x2ai-chat__tips button{align-self:flex-start;max-width:92%;padding:8px 12px;border:1px solid #dfe4dd;border-radius:12px;background:#fff;color:#1c2521;font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
.x2ai-chat__tips button:hover{border-color:#ed6b2d;color:#ed6b2d}
.x2ai-chat__error{margin:0;padding:8px 12px;border-radius:10px;background:#fbeaea;color:#c53628;font-size:12.5px;font-weight:600}
.x2ai-chat__note{padding:0 14px 10px;color:#6d7771;font-size:11px}
@media(max-width:700px){
  .x2ai{right:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .x2ai-pet{width:96px;height:142px}.x2ai-pet__body{left:6px;width:84px;height:126px}.x2ai-pet__shadow{width:50px;margin-left:-25px}
  .x2ai-chat{max-height:min(560px,calc(100dvh - var(--x2ai-bottom,76px) - 148px))}
}
@media(prefers-reduced-motion:reduce){.x2ai-pet__body,.x2ai-pet__body .x2ai-pet__arm,.x2ai-pet__lid,.x2ai-pet__glow,.x2ai-pet__shadow,.x2ai-msg--typing i{animation:none!important}}
@media print{.x2ai{display:none!important}}

/* Theme styles for buttons, links and lists must not leak in. */
.x2ai,.x2ai *{box-sizing:border-box}
.x2ai [hidden]{display:none!important}
.x2ai button{font-family:inherit;text-transform:none;letter-spacing:normal;line-height:1.4;box-shadow:none;margin:0}
.x2ai-chat__head b,.x2ai-chat__head small{display:block;line-height:1.3}
.x2ai-msg ul{list-style:disc}
.x2ai-chat__tips button:disabled{opacity:.45;cursor:default;border-color:#dfe4dd;color:#1c2521}
.x2ai-chat__tips button.is-asked{border-color:#f6c9b0;background:#fff7f1}
.x2ai-msg a{color:#d4561c;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.x2ai-msg p+ul,.x2ai-msg ul+p{margin-top:6px}
/* Typed questions. 16px: iPhone Safari zooms the page into any smaller input when it is focused. */
.x2ai-chat__form{display:flex;gap:8px;padding:10px 12px 6px;border-top:1px solid #dfe4dd}
.x2ai-chat__form input{flex:1;min-width:0;height:42px;margin:0;padding:0 12px;border:1px solid #dfe4dd;border-radius:12px;background:#fff;color:#1c2521;font:inherit;font-size:16px;outline:none;box-shadow:none}
.x2ai-chat__form input:focus{border-color:#ed6b2d}
.x2ai-chat__form input:disabled{background:#f4f4f2}
.x2ai-chat__form button{width:42px;height:42px;flex:none;border:0;border-radius:12px;background:#ed6b2d;color:#fff;font-size:15px;cursor:pointer}
.x2ai-chat__form button:disabled{opacity:.4;cursor:default}

/* Phones: the open chat is a card over the visible area (x2-ai-pet.js sets --x2ai-vh / --x2ai-vtop from
   visualViewport) with the pet, smaller, in the corner under it to close it again; while the keyboard is up
   (.is-typing) the card takes the whole visible area, so the input stays above the keyboard. */
@media (max-width:700px){
  .x2ai.is-open{left:auto!important;right:12px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important}
  .x2ai.is-open .x2ai-chat{position:fixed;left:10px;right:10px;top:calc(var(--x2ai-vtop,0px) + 10px);width:auto;height:calc(var(--x2ai-vh,100dvh) - 112px - env(safe-area-inset-bottom));max-height:none!important;border-radius:18px;animation:none}
  .x2ai.is-open.is-typing .x2ai-chat{height:calc(var(--x2ai-vh,100dvh) - 20px)}
  .x2ai.is-open.is-typing .x2ai-pet{visibility:hidden}
  .x2ai.is-open .x2ai-pet{transform:scale(.75);transform-origin:100% 100%}
  .x2ai.is-open .x2ai-bubble{display:none}
}
/* Coffee / lunch / meeting-room pages: after its greeting the pet takes off like a rocket (x2-ai-pet.js launch(): .is-igniting
   sparks, then .is-thrust full flame) and sits in the header before the search icon, a quarter of its size; the
   chat then opens under the header. */
.x2ai-pet__fire{position:absolute;left:53%;top:80%;width:18%;height:24%;margin-left:-9%;transform-origin:50% 0;transform:scaleY(0);opacity:0;pointer-events:none;transition:opacity .2s}
.x2ai-pet__fire::before,.x2ai-pet__fire::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;border-radius:50% 50% 50% 50%/20% 20% 80% 80%}
.x2ai-pet__fire::before{background:radial-gradient(ellipse 50% 70% at 50% 18%,#fff6d8 0,#ffd23f 30%,#ff8a1f 58%,#ed3d1d 78%,transparent 80%);filter:blur(.6px)}
.x2ai-pet__fire::after{left:28%;right:28%;height:55%;background:radial-gradient(ellipse 50% 70% at 50% 20%,#fff 0,#fff3c4 45%,transparent 75%)}
.x2ai-pet__fire i{position:absolute;left:50%;top:6%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff3c4;box-shadow:0 0 5px 2px #ff8a1f;opacity:0}
.x2ai.is-igniting .x2ai-pet__fire{opacity:1;animation:x2aiSputter .45s steps(1) infinite}
.x2ai.is-igniting .x2ai-pet__fire i{animation:x2aiSpark .5s ease-out infinite}
.x2ai-pet__fire i:nth-child(2){--x:-18px;animation-delay:.12s!important}
.x2ai-pet__fire i:nth-child(3){--x:16px;animation-delay:.27s!important}
.x2ai-pet__fire i:nth-child(4){--x:-6px;animation-delay:.38s!important}
.x2ai.is-thrust .x2ai-pet__fire{animation:x2aiThrust .09s linear infinite alternate}
/* The shake is added on top of the float (its own `translate` property): swapping the float for it snapped the body
   back by up to 10px just before take-off, a visible hitch. */
.x2ai.is-thrust .x2ai-pet__body{animation:x2aiFloat 3.2s ease-in-out infinite,x2aiRumble .08s linear infinite}
@keyframes x2aiSputter{0%{transform:scaleY(.18)}20%{transform:scaleY(.42)}35%{transform:scaleY(.08)}55%{transform:scaleY(.34)}75%{transform:scaleY(.12)}90%{transform:scaleY(.5)}}
@keyframes x2aiSpark{0%{opacity:1;transform:translate(0,0) scale(1.2)}100%{opacity:0;transform:translate(calc(var(--x,8px) * var(--k,1)),calc(44px * var(--k,1))) scale(.4)}}
@keyframes x2aiThrust{from{transform:scale(.95,1.5)}to{transform:scale(1.12,2)}}
@keyframes x2aiRumble{0%,100%{translate:0 0}25%{translate:-1px 1px}50%{translate:1px 0}75%{translate:0 -1px}}
/* Landed (.is-cooling for ~2s): the flame sputters, shorter and further apart each time, and goes out; a few last
   sparks, at the pet's header size. */
.x2ai-slot.is-cooling .x2ai-pet__fire{opacity:1;animation:x2aiCool 1.9s steps(1) forwards}
.x2ai-slot.is-cooling .x2ai-pet__fire i{--k:.35;width:2px;height:2px;margin-left:-1px;box-shadow:0 0 3px 1px #ff8a1f;animation:x2aiSpark .5s ease-out 2}
@keyframes x2aiCool{0%{transform:scaleY(.9)}7%{transform:scaleY(.25)}12%{transform:scaleY(.75)}20%{transform:scaleY(.1)}27%{transform:scaleY(.55)}37%{transform:scaleY(0)}45%{transform:scaleY(.4)}57%{transform:scaleY(0)}64%{transform:scaleY(.25)}78%{transform:scaleY(0)}85%{transform:scaleY(.12)}91%,100%{transform:scaleY(0)}}
/* Its place in the header opens as it lands and takes the divider in front of the search icon along to its left. */
.x2ai-slot{position:relative;flex:none;width:0;height:50px;margin:-10px -12px -10px 0;transition:width .9s 2s ease-out,margin .9s 2s ease-out}
.x2ai-slot.is-open{width:34px;margin-right:0}
@media(max-width:390px){.x2ai-slot:not(.is-open){margin-right:-10px}} /* the header's gap there (contact-dock.css) */
.header .header-actions.has-x2ai .search::after{display:none!important}
.x2ai-slot.has-divider::before{content:"";position:absolute;left:-21px;top:50%;height:16px;margin-top:-8px;border-left:1px solid rgba(0,0,0,.34);transition:left .9s 2s ease-out}
.x2ai-slot.has-divider.is-open::before{left:-14px}
.x2ai-slot .x2ai-pet{width:34px;height:50px;margin:0;padding:0;border:0;background:none;box-shadow:none;box-sizing:border-box}
.x2ai-slot .x2ai-pet__body,.x2ai-slot .x2ai-pet:hover .x2ai-pet__body{left:2px;width:30px;height:45px;animation:x2aiBob 2.6s ease-in-out infinite}
.x2ai-slot .x2ai-pet__body img{filter:drop-shadow(0 2px 4px #1c252140)}
.x2ai-slot .x2ai-pet__lid{box-shadow:none}
.x2ai-slot .x2ai-pet__lid::after{border-bottom-width:1px;box-shadow:none}
.x2ai-slot .x2ai-pet__glow{width:10px;height:10px;margin:-5px 0 0 -5px}
.x2ai-slot .x2ai-pet__shadow{display:none}
@keyframes x2aiBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
.x2ai.is-docked{top:calc(var(--x2ai-head,72px) + 8px);bottom:auto;right:16px;left:auto}
.x2ai.is-docked .x2ai-chat{max-height:min(600px,calc(100dvh - var(--x2ai-head,72px) - 24px));transform-origin:100% 0}
@media(max-width:700px){
  .x2ai-slot{height:42px}
  .x2ai-slot.is-open,.x2ai-slot .x2ai-pet{width:28px;height:42px}
  .x2ai-slot .x2ai-pet__body,.x2ai-slot .x2ai-pet:hover .x2ai-pet__body{left:1px;width:26px;height:39px}
  .x2ai.is-docked.is-open .x2ai-chat{height:calc(var(--x2ai-vh,100dvh) - 20px)}
}

html.x2ai-lock,html.x2ai-lock body{overflow:hidden}
html.x2ai-lock .social-cta{display:none!important} /* the contact dock would sit on the chat's input */