/* Mexa UI refinement. Existing AI, QRIS and attachment behavior is preserved. */
:root{--mexa-ease:cubic-bezier(.22,1,.36,1)}
#chat{width:960px;height:850px;max-height:calc(100dvh - 32px);border:1px solid #ffffff1a!important;border-radius:28px!important;box-shadow:0 40px 140px #09081270,0 0 0 1px #ffffff04}
#chat .mexa-main{isolation:isolate;background:radial-gradient(ellipse at 14% 7%,#5b293345,transparent 48%),radial-gradient(ellipse at 92% 74%,#29264735,transparent 48%),#14141e}
#chat .mexa-main:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(#000,transparent 80%);-webkit-mask-image:linear-gradient(#000,transparent 80%)}
#chat .mexa-main:after{content:'';position:absolute;left:13%;right:13%;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#dc879f70,transparent)}
#chat .chat-header{padding:26px 7% 15px;min-height:171px}
#chat .chat-identity{position:relative}
#chat .avatar{width:70px;height:70px;border:4px solid #21212c;box-shadow:0 0 0 1px #a36e824d,0 0 40px #bb426130;background:#f3e6e9}
#chat .chat-header #chat-title{font-size:24px;letter-spacing:-.8px;margin-top:10px}
#chat .chat-identity p{font-size:11px;color:#b4a5b8;letter-spacing:.2px;margin-top:4px}
#chat .settings-toggle,#chat .new-chat{border:1px solid #ffffff12!important;background:#ffffff04!important;border-radius:14px;width:40px;height:40px;transition:background .2s,border-color .2s,transform .25s var(--mexa-ease)}
#chat .settings-toggle:hover,#chat .new-chat:hover{border-color:#c58c9b55!important;transform:translateY(-2px)}
#chat .settings-toggle svg,#chat .new-chat svg{height:21px;width:21px}
#chat .close-chat{right:12px;top:9px;width:27px;height:27px;border-radius:50%;color:#9b8f9f;font-size:20px;transition:background .2s,color .2s}
#chat .close-chat:hover{background:#ffffff0d;color:white}
#chat .chat-scroll{padding:7px 10% 20px;scrollbar-width:thin;scrollbar-color:#53404e transparent;scroll-behavior:smooth}
#chat .chat-welcome{position:relative;max-width:610px;margin:0 auto;padding:30px 0 15px}
.welcome-decoration{position:absolute;inset:0;pointer-events:none;color:#a66d84}
.welcome-decoration>span:first-child{position:absolute;top:63px;left:4%;font-size:21px;transform:rotate(-12deg)}
.welcome-decoration>span:last-child{position:absolute;right:5%;top:125px;font-size:30px;color:#b6a179}
.welcome-decoration>i{position:absolute;right:12%;top:40px;width:5px;height:5px;border-radius:50%;background:#c08f9d;box-shadow:-440px 210px 0 -1px #a68e6a}
.chat-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:8px;font-weight:500;letter-spacing:1.8px;color:#c1a6b7}
.chat-eyebrow>i{height:5px;width:5px;border-radius:50%;background:#d28a9c;box-shadow:0 0 9px #d28a9c55}
#chat .chat-welcome h3{font-size:43px;line-height:1.12;letter-spacing:-1.8px;font-weight:600;margin:20px 0 17px;color:#faf2f7}
#chat .chat-welcome h3 em{font-style:normal;background:linear-gradient(105deg,#e0a5b8,#edc6a5);-webkit-background-clip:text;background-clip:text;color:transparent}
#chat .chat-welcome>p{font-size:12px;line-height:1.9;color:#a69bae;margin:0 0 27px}
#chat .topic-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
#chat .chat-welcome .topic-cards>button{display:flex;align-items:center;gap:12px;margin:0;padding:19px 16px;min-width:0;background:linear-gradient(135deg,#ffffff07,#ffffff03);border:1px solid #ffffff14;border-radius:17px;color:inherit;font-size:12px;transition:transform .3s var(--mexa-ease),border-color .25s,background .25s,box-shadow .25s}
#chat .chat-welcome .topic-cards>button:hover{transform:translateY(-4px);background:#ffffff09;border-color:#b9768e66;box-shadow:0 12px 25px #0002}
.topic-card-icon{width:36px;height:38px;display:grid;place-items:center;flex:none;border:1px solid #9b536d30;border-radius:11px;background:#9d536d16;color:#d89aa9}
#chat .topic-card-icon svg{height:22px;width:22px}
.topic-cards>button:nth-child(2) .topic-card-icon{color:#c8b085;background:#c8a65b0c;border-color:#c8a65b25}
.topic-cards strong{display:block;color:#e4d8e6;font-size:11px;font-weight:500;line-height:1.6}
.topic-cards small{display:block;color:#948899;font-size:8px;margin-top:5px;line-height:1.6}
.topic-cards b{margin-left:auto;font-size:16px;font-weight:400;color:#ab8da4}
.welcome-hint{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:23px;font-size:8px;color:#7e7189;line-height:1.8}
.welcome-hint>span{font-size:15px;color:#a38a69}
#chat .chat-composer{padding:12px 8% 21px;border-top:1px solid #ffffff05;background:linear-gradient(transparent,#14141eaa)}
#chat #chat-form{gap:10px}
#chat .input-pill{background:#252534;border:1px solid #ffffff10;border-radius:20px;padding:7px 10px 7px 17px;transition:border-color .2s,box-shadow .2s}
#chat .input-pill:focus-within{border-color:#ba7c9855;box-shadow:0 0 0 4px #c7799907,0 8px 28px #0001}
#chat #question{font-size:14px;color:#eee3ed;line-height:23px}
#chat #question::placeholder{color:#80758d}
#chat #chat-form button{background:#242433;border:1px solid #ffffff0f;width:45px;height:45px}
#chat #chat-form .mic-button{border:0;background:transparent;width:30px;height:30px;color:#9e91ad}
#chat #chat-form .send-button:not(:disabled){background:linear-gradient(135deg,#be536e,#9a3458);color:white;box-shadow:0 3px 16px #b13e6026}
#chat #chat-form .send-button{transition:transform .2s var(--mexa-ease),background .2s,opacity .2s}
#chat #chat-form .send-button:not(:disabled):hover{transform:translateY(-2px);background:linear-gradient(135deg,#ce637e,#a63d61)}
#chat #chat-form .send-button:disabled{background:#3b3343;opacity:.6}
#chat #chat-form button svg{width:21px;height:21px}
#chat .composer-meta{color:#7e738e;font-size:8px;margin-top:11px;line-height:1.7}
#chat .message{animation:mexa-message-arrive .35s var(--mexa-ease) both}
#chat .message-content{box-shadow:0 4px 18px #0000000a;border:1px solid #ffffff07;border-radius:21px;line-height:1.75}
#chat .message.bot{max-width:80%}
#chat .message.user .message-content{background:linear-gradient(125deg,#ae4b65,#9c3457);border-color:#ffbdc412}
#chat .message-label{box-shadow:0 0 0 3px #ffffff05}
#chat .message-time{font-size:9px;color:#9885a3}
#chat .copy-answer{color:#a18aa8;transition:opacity .2s}
#chat-settings,#attachment-menu{background:#242330eF;border:1px solid #ffffff25;box-shadow:0 20px 60px #07071160;backdrop-filter:blur(16px)}
#chat-settings{width:330px;left:7%;top:26px;border-radius:22px;padding:24px}
#chat-settings h3{font-size:21px;font-weight:500}
#chat-settings>p{font-size:12px;margin-top:3px;color:#9d8aaa}
#chat .theme-toggle{font-size:13px;padding:12px 15px;border:1px solid #ffffff0b;background:#383142;border-radius:12px;width:100%}
#chat .theme-toggle svg{width:23px;height:23px}
#chat #chat-settings .payment-reset-demo{font-size:10px!important;border-radius:12px;color:#b79cab;border-color:#a66b852f;background:#a66b850b}
#attachment-menu{border-radius:19px;padding:10px 18px;width:200px}
#chat #attachment-menu button{font-size:13px;padding:14px 0;transition:color .2s,transform .2s}
#chat #attachment-menu button:hover{transform:translateX(3px);color:#e8b7ca}
#attachment-menu svg{height:24px!important;width:24px!important}
#payment{isolation:isolate;border-radius:26px;background:radial-gradient(ellipse at 15% 10%,#803e5525,transparent 55%),#1b1925;box-shadow:0 30px 100px #09081270;border-color:#9e617c33}
#payment:before{content:'✦';position:absolute;right:35px;top:87px;font-size:24px;transform:rotate(12deg);color:#ba9b6c55;pointer-events:none}
#payment .payment-icon{border-radius:18px;background:#a94c7020;border-color:#cf7e9c30;box-shadow:0 0 40px #c74c6b12}
#payment .payment-price-card{border-color:#c9809b35;background:linear-gradient(145deg,#46304466,#29243466);position:relative;overflow:hidden}
#payment .payment-price-card:after{content:'';position:absolute;width:100px;height:100px;right:-50px;top:-50px;border-radius:50%;border:1px solid #bd7c9222;box-shadow:0 0 0 17px #bd7c9207,0 0 0 34px #bd7c9204;pointer-events:none}
#payment .payment-primary{background:linear-gradient(110deg,#ba4d6c,#a33b60);border-color:#c06a8733;border-radius:13px;box-shadow:0 5px 22px #ae3d5e20;transition:transform .25s var(--mexa-ease),box-shadow .25s}
#payment .payment-primary:hover{transform:translateY(-2px);box-shadow:0 10px 27px #b144652e}
#payment .payment-primary:active{transform:translateY(1px)}
#payment-plan:not([hidden]),#payment-scan:not([hidden]){animation:mexa-stage-arrive .4s var(--mexa-ease) both}
#chat[open],#payment[open],#info[open]{animation:mexa-panel-enter .6s var(--mexa-ease) both;transform-origin:50% 65%}
#chat[open]::backdrop,#payment[open]::backdrop,#info[open]::backdrop{animation:mexa-curtain-enter .45s ease-out both}
#chat[open] .chat-header{animation:mexa-content-arrive .6s .12s var(--mexa-ease) both}
#chat[open] .chat-eyebrow{animation:mexa-content-arrive .6s .2s var(--mexa-ease) both}
#chat[open] .chat-welcome h3,#chat[open] .chat-welcome>p{animation:mexa-content-arrive .65s .25s var(--mexa-ease) both}
#chat[open] .topic-cards>button:first-child{animation:mexa-content-arrive .65s .32s var(--mexa-ease) both}
#chat[open] .topic-cards>button:last-child{animation:mexa-content-arrive .65s .39s var(--mexa-ease) both}
#chat[open] .chat-composer{animation:mexa-content-arrive .6s .22s var(--mexa-ease) both}
#chat.is-closing,#payment.is-closing,#info.is-closing{animation:mexa-panel-exit .24s ease-in both;pointer-events:none}
#chat.is-closing::backdrop,#payment.is-closing::backdrop,#info.is-closing::backdrop{animation:mexa-curtain-exit .24s ease-in both}
@keyframes mexa-panel-enter{from{opacity:0;transform:translateY(26px) scale(.965);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes mexa-panel-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(15px) scale(.98)}}
@keyframes mexa-curtain-enter{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(9px)}}
@keyframes mexa-curtain-exit{to{opacity:0}}
@keyframes mexa-content-arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes mexa-message-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mexa-stage-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#chat.light-theme .mexa-main{background:radial-gradient(ellipse at 12% 8%,#fce2e4,transparent 55%),#f4f0f6;--bubble:#fff;--bubble-text:#493c50;color:#403247}
#chat.light-theme .mexa-main:before{opacity:.3;background-image:linear-gradient(#7a557a0c 1px,transparent 1px),linear-gradient(90deg,#7a557a0c 1px,transparent 1px)}
#chat.light-theme .chat-header #chat-title,#chat.light-theme .chat-welcome h3{color:#463145}
#chat.light-theme .chat-welcome h3 em{background:none;color:#aa496c}
#chat.light-theme .chat-welcome>p,#chat.light-theme .chat-identity p{color:#8c748b}
#chat.light-theme .chat-eyebrow{color:#aa6b87}
#chat.light-theme .topic-cards>button{background:#fff9;border-color:#b8839c22}
#chat.light-theme .topic-cards strong{color:#62455e}
#chat.light-theme .topic-cards small{color:#a589a1}
#chat.light-theme .welcome-hint{color:#a690a7}
#chat.light-theme .chat-composer{background:linear-gradient(transparent,#f4f0f6);border-color:#8c718a0d}
#chat.light-theme .input-pill{background:#fff;border-color:#b99ab14d}
#chat.light-theme #question{color:#503a4c}
#chat.light-theme #question::placeholder{color:#b19cad}
#chat.light-theme #chat-form .attachment-toggle,#chat.light-theme .settings-toggle,#chat.light-theme .new-chat{background:#e9e1ed!important;color:#85687f;border-color:#a78eaa33!important}
#chat.light-theme .composer-meta{color:#a18ba2}
#chat.light-theme .message.user .message-content{color:#fff}
#chat.light-theme .message-time{color:#a790a9}
@media(max-width:650px){#chat{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0!important}.welcome-decoration>span:first-child{left:0;top:80px}.welcome-decoration>span:last-child{right:0;top:143px}#chat .chat-header{padding:26px 7% 12px;min-height:155px}#chat .avatar{height:61px;width:61px}#chat .chat-header #chat-title{font-size:22px}#chat .chat-scroll{padding:3px 8% 17px}#chat .chat-welcome{padding-top:30px}#chat .chat-welcome h3{font-size:36px;letter-spacing:-1.3px}#chat .chat-welcome>p{font-size:11px}#chat .topic-cards{grid-template-columns:1fr;gap:10px}#chat .chat-welcome .topic-cards>button{padding:16px 14px;border-radius:15px}.topic-cards strong{font-size:11px}.topic-cards small{font-size:9px}.welcome-hint{font-size:8px;margin-top:20px;max-width:270px;margin-left:auto;margin-right:auto}#chat .chat-composer{padding:12px 6% max(17px,env(safe-area-inset-bottom))}#chat .message.bot{max-width:85%}#chat #question{font-size:16px}.chat-eyebrow{font-size:7px;letter-spacing:1.3px}#chat-settings{left:6%;width:85%;max-width:330px}.welcome-decoration>i{box-shadow:none}#payment:before{font-size:20px;right:25px}}
@media(max-height:650px) and (min-width:651px){#chat .chat-header{min-height:130px;padding-top:16px}#chat .avatar{height:48px;width:48px}#chat .chat-header #chat-title{font-size:19px}#chat .chat-welcome{padding-top:10px}#chat .chat-welcome h3{font-size:34px;margin:12px 0}#chat .chat-welcome>p{margin-bottom:18px}#chat .topic-cards>button{padding:13px 12px!important}.welcome-hint{margin-top:15px}}
@media(prefers-reduced-motion:reduce){#chat[open],#payment[open],#info[open],#chat[open]::backdrop,#payment[open]::backdrop,#info[open]::backdrop,#chat[open] .chat-header,#chat[open] .chat-eyebrow,#chat[open] .chat-welcome h3,#chat[open] .chat-welcome>p,#chat[open] .topic-cards>button,#chat[open] .chat-composer,#chat .message,#payment-plan:not([hidden]),#payment-scan:not([hidden]),#chat.is-closing,#payment.is-closing,#info.is-closing{animation:none!important;filter:none!important}#chat .chat-scroll{scroll-behavior:auto}#chat button,#payment button{transition:none!important}}

#chat[open] .chat-header,#chat[open] .chat-eyebrow,#chat[open] .chat-welcome h3,#chat[open] .chat-welcome>p,#chat[open] .topic-cards>button,#chat[open] .chat-composer{animation-fill-mode:backwards}

#chat .chat-scroll{overflow-x:hidden}
@media(max-width:650px){#chat .chat-scroll{padding-left:12%;padding-right:12%}#chat .chat-welcome{margin-left:-4%;margin-right:-4%}#chat .topic-cards{gap:9px}#chat .chat-welcome .topic-cards>button{padding:14px 11px;gap:9px}.topic-cards strong{font-size:10px}.topic-cards small{font-size:8px}.topic-card-icon{width:32px;height:34px}}