/* VR IT Course Advisor (chatbot) */
.vra, .vra *{box-sizing:border-box;}
.vra{--a-blue:#0B4EA2;--a-deep:#072F66;--a-orange:#F7931E;--a-ink:#12203A;--a-line:#DCE5F2;--a-paper:#F2F6FC;font-family:'Poppins',Arial,sans-serif;}
.vra-launch{position:fixed;right:20px;bottom:24px;z-index:10001;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;border:0;border-radius:30px;background:var(--a-deep);color:#fff;font:600 14px/1 'Poppins',Arial,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(7,47,102,.35);transition:transform .2s;}
.vra-launch:hover{transform:translateY(-2px);}
.vra-launch .vra-av{width:42px;height:42px;border-radius:50%;background:var(--a-orange);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--a-ink);flex:none;}
.vra-launch .vra-dot{position:absolute;top:6px;left:38px;width:12px;height:12px;border-radius:50%;background:#22C55E;border:2px solid var(--a-deep);}
.vra-launch[aria-expanded="true"]{display:none;}
.vra-teaser{position:fixed;right:20px;bottom:92px;z-index:10001;max-width:280px;background:#fff;color:var(--a-ink);border-radius:14px 14px 4px 14px;padding:14px 34px 14px 16px;font-size:14px;line-height:1.5;box-shadow:0 10px 30px rgba(7,47,102,.22);cursor:pointer;animation:vraUp .35s ease;}
.vra-teaser b{color:var(--a-blue);}
.vra-teaser .vra-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;color:#8090A8;cursor:pointer;line-height:1;padding:4px;}
.vra-panel{position:fixed;right:20px;bottom:24px;z-index:10002;width:380px;height:min(620px,calc(100vh - 48px));display:none;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(7,47,102,.32);animation:vraUp .25s ease;}
.vra-panel.on{display:flex;}
.vra-head{background:linear-gradient(135deg,var(--a-deep),var(--a-blue));color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.vra-head .vra-av{width:40px;height:40px;border-radius:50%;background:var(--a-orange);color:var(--a-ink);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;}
.vra-head b{display:block;font-size:15px;}
.vra-head small{display:block;font-size:12px;opacity:.85;}
.vra-head small:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#22C55E;margin-right:6px;}
.vra-head .vra-close{margin-left:auto;border:0;background:rgba(255,255,255,.15);color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1;}
.vra-tag{background:#FFF4E5;color:#7A4100;font-size:12px;font-weight:600;padding:7px 14px;text-align:center;}
.vra-body{flex:1;overflow-y:auto;padding:16px 14px 8px;background:var(--a-paper);scroll-behavior:smooth;}
.vra-msg{max-width:88%;margin:0 0 10px;padding:10px 13px;border-radius:14px 14px 14px 4px;background:#fff;color:var(--a-ink);font-size:14px;line-height:1.55;box-shadow:0 1px 3px rgba(7,47,102,.08);animation:vraIn .25s ease;}
.vra-msg.me{margin-left:auto;background:var(--a-blue);color:#fff;border-radius:14px 14px 4px 14px;}
.vra-msg ul{margin:6px 0 0;padding-left:18px;} .vra-msg li{margin:2px 0;}
.vra-msg a{color:var(--a-blue);font-weight:600;}
.vra-typing{display:inline-flex;gap:4px;padding:12px 14px;}
.vra-typing i{width:7px;height:7px;border-radius:50%;background:#9AAAC2;animation:vraDot 1s infinite;}
.vra-typing i:nth-child(2){animation-delay:.15s;} .vra-typing i:nth-child(3){animation-delay:.3s;}
.vra-card{background:#fff;border:1px solid var(--a-line);border-left:4px solid var(--a-orange);border-radius:12px;padding:12px 14px;margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--a-ink);animation:vraIn .25s ease;}
.vra-card h4{font-size:14.5px;margin:0 0 6px;color:var(--a-deep);}
.vra-card ul{margin:4px 0 0;padding-left:0;list-style:none;} .vra-card li{padding-left:22px;position:relative;margin:4px 0;}
.vra-card li:before{content:"✓";position:absolute;left:2px;color:#16A34A;font-weight:700;}
.vra-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px;animation:vraIn .25s ease;}
.vra-chip{border:1.5px solid var(--a-blue);background:#fff;color:var(--a-blue);border-radius:20px;padding:8px 14px;font:600 13px/1.25 'Poppins',Arial,sans-serif;cursor:pointer;text-align:left;}
.vra-chip:hover,.vra-chip:focus-visible{background:var(--a-blue);color:#fff;outline:none;}
.vra-chip.main{background:var(--a-orange);border-color:var(--a-orange);color:var(--a-ink);}
.vra-chip.wa{background:#25D366;border-color:#25D366;color:#fff;}
.vra-form{background:#fff;border-radius:14px;padding:14px;margin:0 0 12px;box-shadow:0 1px 3px rgba(7,47,102,.08);animation:vraIn .25s ease;}
.vra-form label{display:block;font-size:12.5px;font-weight:600;color:var(--a-deep);margin:0 0 4px;}
.vra-form input,.vra-form textarea{width:100%;border:1.5px solid var(--a-line);border-radius:10px;padding:10px 12px;font:14px 'Poppins',Arial,sans-serif;color:var(--a-ink);margin:0 0 10px;background:#fff;}
.vra-form input:focus,.vra-form textarea:focus{outline:none;border-color:var(--a-blue);}
.vra-form .vra-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.vra-form button{width:100%;border:0;border-radius:10px;background:var(--a-orange);color:var(--a-ink);font:700 14.5px 'Poppins',Arial,sans-serif;padding:12px;cursor:pointer;}
.vra-form button[disabled]{opacity:.6;cursor:wait;}
.vra-form .vra-note{font-size:11.5px;color:#5B6B85;margin:8px 0 0;line-height:1.45;}
.vra-form .vra-err{color:#B42318;font-size:12.5px;margin:-4px 0 8px;}
.vra-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--a-line);background:#fff;}
.vra-input input{flex:1;border:1.5px solid var(--a-line);border-radius:22px;padding:10px 14px;font:14px 'Poppins',Arial,sans-serif;min-width:0;}
.vra-input input:focus{outline:none;border-color:var(--a-blue);}
.vra-input button{border:0;border-radius:50%;width:42px;height:42px;background:var(--a-blue);color:#fff;font-size:16px;cursor:pointer;flex:none;}
.vra-foot{font-size:11px;text-align:center;color:#8090A8;padding:0 0 8px;background:#fff;}
@keyframes vraUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes vraIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes vraDot{0%,60%,100%{opacity:.35;transform:none;}30%{opacity:1;transform:translateY(-3px);}}
@media(max-width:991px){
  .vra-launch{right:12px;bottom:calc(78px + env(safe-area-inset-bottom));height:52px;width:52px;padding:0;justify-content:center;}
  .vra-launch .vra-lbl{display:none;}
  .vra-launch .vra-av{width:52px;height:52px;background:var(--a-deep);color:#fff;font-size:21px;}
  .vra-launch .vra-dot{top:2px;left:auto;right:2px;}
  .vra-teaser{right:12px;bottom:calc(140px + env(safe-area-inset-bottom));max-width:250px;font-size:13.5px;}
}
@media(max-width:600px){
  .vra-panel{right:0;left:0;bottom:0;width:100%;height:92vh;height:92dvh;border-radius:18px 18px 0 0;}
  .vra-chip{font-size:13.5px;padding:9px 14px;}
}
@media (prefers-reduced-motion:reduce){.vra *, .vra-launch, .vra-panel, .vra-teaser{animation:none!important;transition:none!important;}}
