@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{--ink:#193c37;--teal:#32b9ab;--orange:#ff986c;--paper:#f9f8f1}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Space Grotesk','Noto Sans SC',sans-serif;background:var(--paper)}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d17843;outline-offset:4px}header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;border-bottom:1px solid #dce3db}.brand{text-decoration:none;color:var(--ink);font-size:28px;letter-spacing:-1px;font-weight:700;display:flex;align-items:center;gap:10px}.brand-icon{background:var(--teal);color:#fffde7;display:grid;place-items:center;border-radius:10px;width:36px;height:36px;font-size:30px}.brand-dot{font-size:11px;align-self:flex-start;margin-top:8px;margin-left:-6px}nav{display:flex;align-items:center;gap:36px}.nav-note{font-size:10px;letter-spacing:1.5px}.settings-trigger{border:1px solid #c9d6cb;border-radius:30px;background:none;padding:12px 20px;font-size:12px;display:flex;gap:25px}.settings-trigger span{font-size:16px}main{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(390px,1fr);min-height:720px;height:calc(100dvh - 150px);max-height:1000px}.hero{position:relative;overflow:hidden;background:linear-gradient(175deg,#32b9ab 0%,#32b9ab 48%,#8fbbaa 70%,#ff9e77 92%,#ff976f 100%);padding:35px 7%;border-right:1px solid #dce3db}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.8px;color:#164d43}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#175d4d}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(72px,8.6vw,150px);line-height:.88;letter-spacing:-8px;font-weight:700;margin:38px 0 0;color:#fbffe7;position:relative;z-index:1}h1 span{display:block}.hero-copy{position:absolute;left:7%;bottom:115px;z-index:3}.small-star{font-size:27px;color:#fff7dc}.hero-copy p{font-size:21px;line-height:1.6;font-weight:600;letter-spacing:1px;margin:10px 0 13px}.hero-sub{font-size:11px;line-height:1.9;color:#355b4c}.robot-wrap{position:absolute;width:90%;right:-16%;bottom:38px;z-index:2;pointer-events:none}.robot{width:100%;display:block;overflow:visible;animation:bob 5s ease-in-out infinite}.floating-note{position:absolute;right:20%;top:17%;background:#fff7dfeb;border:1px solid #fbffe791;box-shadow:0 7px 20px #1b796526;border-radius:8px;padding:10px 13px;font-size:11px;transform:rotate(8deg)}.floating-note span{color:#dc8951;font-size:16px;margin-right:5px}.hero-bottom{position:absolute;bottom:24px;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:#634e36}.chat-section{display:flex;flex-direction:column;min-width:0;padding:32px 35px 22px;background:var(--paper)}.chat-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:23px;border-bottom:1px solid #e0e4da}.chat-person{display:flex;gap:12px;align-items:center}.mini-bot{background:#e4eee2;display:grid;place-items:center;width:43px;height:43px;border-radius:14px;font-size:33px;color:#39a998}.chat-person h2{font-size:15px;font-weight:600;margin:0 0 6px}.chat-person p{font-size:10px;margin:0;color:#819087}.chat-person i,.composer-foot i{display:inline-block;width:5px;height:5px;background:#8e9d8f;border-radius:50%;margin-right:5px}.connected i{background:#31ad8e}.icon-btn{border:1px solid #dce2d6;background:transparent;width:34px;height:34px;border-radius:50%;font-size:22px;color:#567165}.messages{flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#c6d8ca transparent;min-height:0;padding:22px 0}.welcome{display:flex;flex-direction:column;justify-content:center;min-height:100%;padding:15px 9px 25px}.hello-mark{color:var(--teal);font-size:55px;line-height:1.1;display:block;margin-bottom:20px}.welcome h3{font-size:29px;letter-spacing:-1px;font-weight:600;margin:0 0 17px}.welcome h3 span{color:#e68d62}.welcome>p{font-size:12px;color:#829086;line-height:1.9;margin:0 0 30px}.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.suggestions button{background:#f4f4e9;border:1px solid #dfe5d6;border-radius:10px;padding:15px 13px;text-align:left;color:#456252;font-size:11px;transition:.2s}.suggestions button:hover{background:#e8efdf;transform:translateY(-2px)}.suggestions span{float:right;color:#9aa68e}.composer-wrap{padding-top:10px}#chatForm{padding:13px 12px 12px 17px;display:flex;align-items:flex-end;gap:8px;border:1px solid #d5dfd0;border-radius:15px;background:#fffef8;box-shadow:0 5px 14px #4a674806}#chatForm:focus-within{border-color:#48b3a0;box-shadow:0 0 0 3px #32b9ab13}textarea{flex:1;min-width:0;max-height:140px;line-height:1.7;resize:none;padding:5px 0;border:0;background:transparent;outline:0;color:#294b3e;font-size:12px}textarea::placeholder{color:#98a492}#sendBtn{flex-shrink:0;width:34px;height:34px;border:0;background:#244e40;color:#fff8dc;border-radius:10px;font-size:22px}#sendBtn:disabled{opacity:.5;cursor:wait}.composer-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#9ba393;margin-top:12px}.composer-foot button{border:0;background:transparent;color:#6c8575;font-size:10px}.composer-foot button span{margin-left:7px}.composer-foot i{background:#d89b6c}footer{height:56px;display:flex;justify-content:space-between;align-items:center;padding:0 4.5%;font-size:9px;letter-spacing:1px;border-top:1px solid #dce3db;color:#879784}footer b{color:#d79162;margin-left:8px;font-size:16px}footer button{border:0;background:transparent;color:#879784;font-size:10px}.message{font-size:13px;line-height:1.9;max-width:90%;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:18px;padding:12px 16px;border-radius:15px}.message.user{margin-left:auto;background:#dfede0;border-bottom-right-radius:3px}.message.assistant{background:#efefe4;border-bottom-left-radius:3px}.message.error{background:#fff0e5;color:#925836}.message-label{font-size:9px;letter-spacing:1px;color:#8b9785;display:block;margin-bottom:5px}.typing{animation:pulse 1s infinite}#notice{font-size:11px;line-height:1.6;color:#9c704e;margin-bottom:8px}dialog{border:1px solid #d1ddcc;border-radius:22px;padding:30px;width:440px;max-width:calc(100% - 30px);color:var(--ink);background:var(--paper);box-shadow:0 20px 100px #153a3655}dialog::backdrop{background:#143d3566;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px}.dialog-head button{border:0;background:none;color:#526e60;font-size:25px}dialog h2{font-size:23px;margin:21px 0 12px}dialog h2 span{color:#e19563}dialog p{font-size:12px;line-height:1.8;color:#83917f}dialog label{display:block;font-size:12px;margin:22px 0 8px}dialog input{width:100%;border:1px solid #cbd8c7;border-radius:10px;padding:13px;background:#fffef6;outline-color:#32b9ab}dialog .key-note{font-size:10px}dialog a{font-size:12px;color:#258d7c}.model-info{background:#e9efdf;padding:14px;border-radius:10px;margin:20px 0;display:grid;gap:5px;font-size:11px}.model-info strong{font-size:14px}.model-info small{font-size:10px;color:#809079}.connect-btn{background:#244e40;color:#fff8dc;border:0;border-radius:10px;width:100%;padding:14px;font-size:13px}.disconnect{display:block;margin:14px auto 0;border:0;background:transparent;color:#8c9385;font-size:10px}.form-error{color:#a15339!important}@keyframes bob{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes pulse{50%{opacity:.4}}@media(min-width:1600px){.robot-wrap{width:85%;right:-10%}}@media(max-width:1100px){.nav-note{display:none}main{grid-template-columns:1fr 1fr}.hero{padding-top:30px}h1{font-size:9.8vw;letter-spacing:-6px}.hero-copy{bottom:105px}.hero-copy p{font-size:17px}.robot-wrap{width:113%;right:-27%;bottom:68px}.hero-sub{font-size:10px}.chat-section{padding:25px 24px}.hero-bottom span:last-child{display:none}.welcome h3{font-size:25px}.suggestions{gap:8px}.suggestions button{padding:13px 9px;font-size:10px}}@media(max-width:760px){header{height:73px;padding:0 6%}.brand{font-size:24px}.settings-trigger{padding:10px 15px}main{height:auto;max-height:none;min-height:0;display:block}.hero{height:530px;border-right:0;padding:26px 6%}.eyebrow{font-size:8px}h1{font-size:100px;letter-spacing:-6px;margin-top:30px}.robot-wrap{width:380px;right:-46px;bottom:13px}.hero-copy{left:6%;bottom:90px}.hero-copy p{font-size:17px}.hero-sub{font-size:10px}.hero-bottom{left:6%;right:6%;font-size:7px}.hero-bottom span:last-child{display:block}.floating-note{font-size:10px}.chat-section{height:700px;padding:25px 6% 22px}.welcome{padding:15px 4px 25px}.welcome h3{font-size:29px}.suggestions button{font-size:12px;padding:16px 13px}.welcome>p{font-size:13px}.messages{padding:22px 0}.composer-foot{font-size:9px}footer{padding:20px 6%;height:auto;gap:14px;flex-wrap:wrap;font-size:8px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:400px){h1{font-size:clamp(68px,23vw,92px);letter-spacing:-5px}.robot-wrap{width:340px;right:-58px;bottom:26px}.hero-copy p{font-size:15px}.hero-sub{font-size:9px}.hero-bottom span:last-child{display:none}}

/* Keep conversation visible and give the messages the main working area. */
[hidden]{display:none!important}
main{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);min-height:0;height:calc(100dvh - 150px)}
.chat-section{min-height:0;padding:26px clamp(22px,4vw,70px) 22px}
.hero h1{font-size:clamp(64px,6.5vw,110px);letter-spacing:-5px}
.hero-copy{bottom:105px}.hero-sub{max-width:170px;display:block}
.robot-wrap{width:115%;right:-29%;bottom:70px}
.message{font-size:15px;line-height:1.85}.welcome>p{font-size:14px}
textarea{font-size:15px}.chat-person h2{font-size:18px}.chat-person p{font-size:12px}
#stopBtn{flex-shrink:0;width:34px;height:34px;border:0;background:#a95439;color:#fff8dc;border-radius:10px;font-size:16px}
.reply-actions{display:flex;justify-content:flex-end;margin-bottom:6px}
#retryBtn{border:1px solid #cad9c9;border-radius:8px;background:#edf2e7;color:#345e4e;padding:7px 12px;font-size:12px}
button:disabled{cursor:default;opacity:.5}
@media(max-width:1100px){main{grid-template-columns:minmax(240px,.55fr) minmax(0,1fr)}.hero h1{font-size:8vw}.hero-copy p{font-size:16px}}
@media(max-width:760px){
 header{height:64px}.hero{display:none}main{display:flex;height:calc(100dvh - 64px);min-height:420px;max-height:none}
 .chat-section{width:100%;height:100%;padding:20px 5% 16px}.chat-top{padding-bottom:16px}
 footer{display:none}.welcome h3{font-size:28px}.suggestions button{font-size:12px;padding:14px 10px}
 .composer-foot{font-size:10px}.composer-foot button{font-size:11px}textarea{font-size:16px}
}
/* Robot movement is driven by robot.js; CSS cannot suppress its motion. */
.robot-wrap{pointer-events:auto}
.robot-wrap *{animation:none!important}
.robot{cursor:pointer;touch-action:manipulation;outline:none;will-change:transform}
.robot:focus-visible{filter:drop-shadow(0 0 5px #fff7dd)}
.floating-note{pointer-events:none}
.floating-note .robot-note{color:inherit;font-size:inherit;margin:0}
.robot-toggle{position:absolute;z-index:4;left:7%;bottom:54px;border:1px solid #254e3d55;border-radius:20px;padding:7px 11px;background:#fff7dfb3;color:#254e3d;font-size:11px;backdrop-filter:blur(6px)}
@media(max-width:760px){
 main{display:block;height:auto;min-height:0}
 .hero{display:block;height:480px}
 .hero h1{font-size:90px}
 .robot-wrap{width:340px;right:-38px;bottom:32px}
 .hero-copy{bottom:120px}
 .robot-toggle{left:6%;bottom:52px}
 .chat-section{height:calc(100dvh - 64px);min-height:560px}
}

/* Center the illustration within the poster and keep waving hands in frame. */
.hero .robot-wrap{width:min(100%,440px);left:50%;right:auto;transform:translateX(-50%);bottom:110px}
.hero .floating-note{right:10%;max-width:65%;white-space:nowrap}
@media(max-width:760px){
 .hero{height:620px}
 .hero .robot-wrap{width:min(100%,380px);bottom:160px}
 .hero-copy{bottom:85px}
 .hero-copy p{font-size:16px}
}
/* Robot above, answers in the former introduction area, input directly below. */
main{display:flex;flex-direction:column;max-width:900px;margin:0 auto;height:calc(100dvh - 150px);min-height:560px;max-height:none}
.hero{display:flex;flex-direction:column;flex:1;min-height:0;height:auto;padding:0;border:0}
.robot-scene{position:relative;flex:1;min-height:230px;overflow:hidden}
.robot-scene .eyebrow{position:absolute;top:22px;left:5%;z-index:1;font-size:9px}
.hero h1{position:absolute;left:5%;top:62px;font-size:clamp(52px,8vw,88px);letter-spacing:-4px;margin:0;pointer-events:none}
.hero .robot-wrap{height:calc(100% - 26px);max-height:370px;width:auto;aspect-ratio:560 / 620;max-width:95%;left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%)}
.robot{height:100%;width:100%}
.hero .floating-note{right:0;top:20%;font-size:10px}
.robot-toggle{left:auto!important;right:5%;bottom:10px!important;font-size:10px;z-index:4}
.answer-panel{display:flex;flex-direction:column;flex:0 0 clamp(150px,25dvh,230px);min-height:0;margin:0 4% 16px;padding:12px 16px;background:#fff9e6df;border:1px solid #fff8dd99;border-radius:18px;box-shadow:0 5px 18px #694f2810}
.answer-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #52765822;padding-bottom:9px;font-size:12px;font-weight:600}
.answer-heading p{margin:0;font-size:10px;font-weight:400;color:#587565}
.answer-heading i{display:inline-block;width:5px;height:5px;background:#8e9d8f;border-radius:50%;margin-right:4px}
.answer-heading .connected i{background:#31ad8e}
.answer-panel .messages{padding:10px 0 0;flex:1;min-height:0}
.answer-panel .welcome{padding:8px 0;min-height:0;display:block}
.answer-panel .welcome h3{font-size:17px;margin:0 0 8px;letter-spacing:0}
.answer-panel .welcome p{font-size:12px;line-height:1.7;margin:0;color:#5d7867}
.answer-panel .message{font-size:14px;line-height:1.7;margin-bottom:10px;padding:8px 12px}
.chat-section{display:block;flex:none;width:100%;height:auto;min-height:0;padding:14px 4% 12px;border-top:1px solid #e6e1cf}
.composer-wrap{padding:0}
.reply-actions{margin:0}
#notice:empty{display:none}
#notice{margin:0 0 8px}
#chatForm{min-height:65px}
.composer-foot{gap:10px;flex-wrap:wrap;margin-top:9px}
.composer-foot #newChat{font-size:11px;color:#355d4d;padding:2px 0}
@media(max-width:760px){
 main{height:calc(100dvh - 64px);min-height:580px}
 .hero{height:auto}
 .hero h1{font-size:64px}
 .robot-scene .eyebrow{font-size:8px;top:18px}
 .answer-panel{margin-bottom:12px;padding:11px 13px;flex-basis:clamp(145px,24dvh,210px)}
 .answer-heading{font-size:11px}.answer-heading p{font-size:9px}
 .chat-section{height:auto;min-height:0;padding:12px 4%}
}

/* ROBO 1.3.0 — international text and right-to-left layouts. */
.welcome p{white-space:pre-line}
.eyebrow>span[data-i18n]{width:auto;height:auto;border-radius:0;background:none}
.hero .eyebrow{max-width:90%;font-size:clamp(7px,1.3vw,9px);letter-spacing:1px}
.hero h1{font-size:clamp(36px,5.8vw,66px);max-width:90%;overflow-wrap:anywhere;line-height:1.08;letter-spacing:-2px}
.hero .floating-note{max-width:none;font-size:clamp(8px,1.3vw,11px)}
.floating-note .robot-note{white-space:normal;overflow-wrap:anywhere;display:inline-block;max-width:175px;vertical-align:middle}
.robot-toggle{max-width:90%;white-space:normal}
.answer-heading{flex-wrap:wrap;row-gap:5px}
.answer-heading p{font-size:10px;overflow-wrap:anywhere}
.composer-foot>span{font-size:10px}
.message{unicode-bidi:plaintext;text-align:start}
.message-label{unicode-bidi:normal}
[dir="rtl"] .brand,[dir="rtl"] .robot-wrap{direction:ltr}
[dir="rtl"] .hero h1,[dir="rtl"] .robot-scene .eyebrow{left:auto;right:5%;text-align:right}
[dir="rtl"] .answer-panel,[dir="rtl"] .composer-wrap,[dir="rtl"] dialog{text-align:start}
[dir="rtl"] .robot-toggle{right:auto;left:5%!important}
[dir="rtl"] #chatForm{padding:13px 17px 12px 12px}
[dir="rtl"] .message.user{margin-left:0;margin-right:auto}
[dir="rtl"] .message.assistant{margin-left:auto;margin-right:0}
#apiKey{direction:ltr;text-align:left}
@media(max-width:760px){.hero h1{font-size:clamp(32px,8vw,52px)}.composer-foot{row-gap:8px}}

/* ROBO 1.3.1 — header language switch, including narrow screens. */
header nav{gap:16px;min-width:0}
.language-control{display:flex;align-items:center;gap:6px;flex-shrink:0;border:1px solid #ccdacf;border-radius:18px;padding:6px 9px;background:#fffef8;color:var(--ink)}
.language-control>span{font-size:14px;line-height:1}
.language-control select{font:inherit;font-size:12px;color:inherit;border:0;outline:none;background:transparent;cursor:pointer;width:130px;max-width:36vw;min-height:22px}
.language-control:focus-within{outline:2px solid #32b9ab;outline-offset:3px}
.language-control option{background:#fffef8;color:#193c37}
@media(max-width:760px){header nav{gap:0}.language-control{padding:5px 7px;gap:4px}.language-control select{width:108px;font-size:11px}}