:root{--navy:#081f3d;--navy-2:#0c2d56;--blue:#164c7e;--orange:#f28b21;--orange-dark:#dc7210;--paper:#f5f1e9;--ink:#152235;--muted:#68778a;--line:#dbe3eb;--white:#fff;--bot:#fff;--user:#e3effa}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100vh;background:radial-gradient(circle at 13% 18%,rgba(242,139,33,.16),transparent 30%),linear-gradient(135deg,#06182f 0%,#0b2d54 56%,#123b68 100%);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;font-size:16px;overflow:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.shell{width:min(1180px,calc(100vw - 48px));height:min(820px,calc(100vh - 48px));min-height:620px;margin:24px auto;display:grid;grid-template-columns:38% 62%;border-radius:24px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.brand-panel{position:relative;display:flex;flex-direction:column;padding:48px;overflow:hidden;color:var(--white);background:linear-gradient(155deg,rgba(8,31,61,.98),rgba(16,60,103,.97))}
.brand-panel:before{content:"";position:absolute;width:360px;height:360px;right:-170px;top:-80px;border:58px solid rgba(242,139,33,.12);border-radius:50%}
.brand-panel:after{display:none}
.brand-logo,.brand-copy,.course-facts,.brand-foot{position:relative;z-index:1}
.brand-logo{display:block;width:220px;height:80px;object-fit:contain;object-position:left center}
.brand-copy{margin:auto 0}
.eyebrow{color:#f6aa5c;font-size:.78rem;font-weight:700;letter-spacing:.14em}
.brand-copy h1{max-width:360px;margin:14px 0 18px;font-size:clamp(2rem,3vw,3rem);line-height:1.05;font-weight:800;letter-spacing:-.045em}
.brand-copy>p:last-child{max-width:350px;margin:0;color:#ccdaea;line-height:1.65}
.course-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.course-facts div{padding:14px 0;border-top:1px solid rgba(255,255,255,.18)}
.course-facts strong{display:block;color:var(--orange);font-size:1.3rem;font-weight:800}
.course-facts span{display:block;margin-top:4px;color:#c2d0df;font-size:.75rem}
.brand-foot{margin:28px 0 0;color:#97abc1;font-size:.76rem;line-height:1.5}
.chat{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:hidden;background:var(--paper)}
.chat-header{min-height:80px;display:flex;align-items:center;gap:13px;padding:14px 20px;color:var(--white);background:var(--navy);border-bottom:3px solid var(--orange)}
.avatar-wrap{position:relative;flex:0 0 auto}
.avatar-wrap img{width:50px;height:50px;display:block;object-fit:cover;border-radius:15px;border:2px solid rgba(255,255,255,.85)}
.presence{position:absolute;right:-2px;bottom:-1px;width:13px;height:13px;border:3px solid var(--navy);border-radius:50%;background:#2fc477}
.identity{min-width:0;flex:1}
.identity h2{margin:0;font-size:1.05rem}
.identity p{margin:4px 0 0;color:#b9c8d8;font-size:.77rem}
.mini-brand-logo{width:88px;height:32px;margin-left:auto;object-fit:contain}
.icon-button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;color:#c8d4e0;background:transparent}
.icon-button:hover,.icon-button:focus-visible{background:rgba(255,255,255,.1);outline:none}
.icon-button svg,.composer button svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-body{min-height:0;overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px 26px 14px;background-color:#efeae2;background-image:radial-gradient(rgba(91,75,56,.055) 1px,transparent 1px);background-size:18px 18px;scroll-behavior:smooth;scrollbar-color:#8797a7 #ddd7cd;scrollbar-width:thin}
.chat-body::-webkit-scrollbar{width:11px}
.chat-body::-webkit-scrollbar-track{background:#ddd7cd}
.chat-body::-webkit-scrollbar-thumb{border:2px solid #ddd7cd;border-radius:999px;background:#8797a7}
.chat-body::-webkit-scrollbar-thumb:hover{background:#66798b}
.day-label{width:max-content;margin:0 auto 20px;padding:5px 12px;border-radius:999px;color:#6b7885;background:rgba(255,255,255,.82);box-shadow:0 1px 2px rgba(8,31,61,.08);font-size:.7rem;font-weight:600}
.message-row{display:flex;margin:0 0 12px;animation:enter .26s ease both}
.message-row.user{justify-content:flex-end}
.bubble{position:relative;max-width:min(78%,520px);padding:11px 14px 8px;border-radius:5px 17px 17px 17px;background:var(--bot);box-shadow:0 2px 8px rgba(12,45,86,.08);line-height:1.5}
.user .bubble{border-radius:17px 5px 17px 17px;background:var(--user)}
.message-text{white-space:pre-line}
.message-text strong{font-weight:700;color:#0b2d54}
.bubble time{float:right;margin:8px 0 0 10px;color:#8693a0;font-size:.64rem}
.typing .bubble{display:flex;align-items:center;gap:5px;min-width:58px;min-height:40px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8596a8;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
.quick-actions{display:flex;gap:8px;padding:11px 18px;overflow-x:auto;background:var(--white);border-top:1px solid var(--line);scrollbar-width:none}
.quick-actions:empty{display:none}
.quick-actions button{flex:0 0 auto;padding:9px 13px;border:1px solid #f0a050;border-radius:999px;color:#9d4e05;background:#fff9f3;font-size:.8rem;font-weight:600}
.quick-actions button:hover,.quick-actions button:focus-visible{color:#fff;background:var(--orange);outline:none}
.composer{display:flex;gap:10px;padding:12px 18px;background:var(--white)}
.composer input{min-width:0;flex:1;padding:13px 17px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:#f6f8fa;outline:none}
.composer input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,76,126,.12)}
.composer button{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:var(--orange);box-shadow:0 6px 16px rgba(242,139,33,.28)}
.composer button:hover,.composer button:focus-visible{background:var(--orange-dark);outline:none}
.composer button:disabled{opacity:.55;cursor:not-allowed}
.privacy{margin:0;padding:0 18px 10px;color:#8793a0;background:var(--white);text-align:center;font-size:.65rem}
.inline-form{display:grid;gap:9px;width:min(390px,100%);margin-top:10px}
.inline-form input,.inline-form select,.inline-form textarea{width:100%;padding:10px 12px;border:1px solid #d6e0e9;border-radius:9px;background:#fff;color:var(--ink)}
.inline-form textarea{resize:vertical}
.inline-form button{padding:10px 14px;border:0;border-radius:9px;color:#fff;background:var(--orange);font-weight:700}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.76rem;line-height:1.35}
.consent input{width:auto;margin-top:3px}
.form-status{margin:0;color:#8a3c00;font-size:.78rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes enter{from{opacity:0;transform:translateY(8px)}
}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}
30%{opacity:1;transform:translateY(-2px)}
}
@media(max-width:850px){html,body{height:var(--app-height,100dvh);overflow:hidden;background:var(--paper)}
.shell{width:100%;height:var(--app-height,100dvh);min-height:0;margin:0;display:block;border-radius:0;box-shadow:none}
.brand-panel{display:none}
.chat{height:100%}
.mini-brand-logo{display:block}
.chat-body{padding-inline:14px}
.bubble{max-width:88%}
.quick-actions{grid-row:3}
.privacy{grid-row:4;padding:5px 14px 3px}
.composer{grid-row:5;padding:7px 12px max(7px,env(safe-area-inset-bottom))}
}
@media(min-width:851px){.mini-brand-logo{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}