:root{--dark:#39186a;--mid:#897ae9;--pale:#f5ecfd;--text:#30323a;--muted:#a5adba;--line:#c4cad4;--soft:#f3f4f7}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff}.demo{width:100%;min-height:100vh;overflow:hidden}.topbar{height:clamp(74px,8.6vw,132px);background:var(--dark);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(34px,5vw,82px)}.illumin-logo{width:clamp(48px,4.6vw,76px);height:auto}.top-icons{display:flex;align-items:center;gap:clamp(18px,2vw,32px);height:100%}.top-icons>img{display:block;object-fit:contain;width:auto;height:clamp(28px,2.6vw,43px);max-width:58px}.top-icons .avatar{width:clamp(50px,5vw,82px);height:auto;max-width:none}.top-icons .bell-icon{width:auto;height:clamp(42px,3.7vw,60px);max-width:92px;margin-left:-2px;margin-right:-2px}.view{display:none}.view.active{display:block}.topbar{transition:background-color .38s ease}.demo.chat-mode .topbar{background:#8d79a8}.home{height:calc(100vh - clamp(74px,8.6vw,132px));min-height:610px;text-align:center;padding:clamp(38px,5vh,78px) clamp(70px,13vw,215px) 24px}.lu-home{width:clamp(68px,5.7vw,94px);height:auto}.home h1{font-size:clamp(26px,2.3vw,38px);line-height:1.2;margin:10px 0 clamp(16px,2vh,24px);font-weight:700}.askbox{height:clamp(175px,27vh,260px);border:1px solid #aeb6c3;border-radius:18px;text-align:left;padding:clamp(24px,2.3vw,38px) clamp(24px,2vw,34px);color:#a9b1c1;font-size:clamp(20px,1.75vw,28px);position:relative}.askbox button,.input button{position:absolute;right:24px;bottom:22px;width:clamp(48px,4vw,64px);height:clamp(44px,3.7vw,58px);border:1px solid #bbc2cd;border-radius:12px;font-size:clamp(28px,2.4vw,38px);color:#9da6b5;background:#f1f3f6}.home-prompts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.home-prompts button,.more button{border:1.5px solid var(--mid);background:var(--pale);color:var(--dark);font:700 clamp(16px,1.35vw,22px)/1.2 Inter,Arial,sans-serif;border-radius:7px;padding:clamp(12px,1vw,16px);cursor:pointer;transition:.2s}.home-prompts button{animation:promptPulse 1.25s ease-in-out infinite}.home-prompts button:hover,.more button:not(:disabled):hover{background:#eadffc;transform:translateY(-1px)}@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(137,122,233,.22)}}@keyframes promptPulse{0%,100%{background:var(--pale);box-shadow:0 0 0 0 rgba(137,122,233,.12);border-color:var(--mid)}50%{background:#e9ddfc;box-shadow:0 0 0 7px rgba(137,122,233,.25),0 5px 16px rgba(57,24,106,.12);border-color:var(--dark);transform:translateY(-1px)}}
.chat{background:#8d79a8;padding:0 18px 18px;height:calc(100vh - clamp(74px,8.6vw,132px) + 25px);min-height:650px;margin-top:-25px;position:relative;z-index:2;overflow:hidden}.panel{background:#fff;border:1px solid #b6bdc8;border-radius:18px;height:100%;overflow:hidden;transform:translateY(105%);opacity:.98}.chat.active .panel{animation:panelRise .58s cubic-bezier(.22,.8,.3,1) forwards}@keyframes panelRise{from{transform:translateY(105%);opacity:.98}to{transform:translateY(0);opacity:1}}.panel-head{height:clamp(76px,10vh,105px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(26px,2.7vw,44px)}.brand{display:flex;align-items:center;gap:18px;font-size:clamp(24px,1.9vw,31px)}.brand img{width:clamp(48px,3.5vw,58px);height:auto}.close{display:none;border:0;background:transparent;color:#a7afbd;font:400 clamp(30px,2.5vw,40px)/1 Inter,Arial,sans-serif;cursor:pointer;padding:9px 12px;border-radius:10px}.close.ready{display:block;color:#8f98a8;animation:promptPulse 1.15s ease-in-out infinite;background:var(--pale)}.rule{height:4px;background:#f0f2f6}.layout{height:calc(100% - clamp(80px,10.4vh,109px));display:grid;grid-template-columns:minmax(0,2.25fr) minmax(300px,.92fr);gap:clamp(24px,2.3vw,38px);padding:clamp(26px,4vh,42px) clamp(28px,4vw,66px) clamp(22px,3vh,30px)}.conversation{min-width:0;display:flex;flex-direction:column}.question{background:#eef1f5;margin-left:auto;width:max-content;max-width:80%;padding:clamp(11px,1vw,16px) clamp(16px,1.2vw,20px);border-radius:4px;font-size:clamp(17px,1.45vw,24px);flex:0 0 auto}.thinking{display:none;align-items:center;gap:12px;margin:clamp(20px,3vh,34px) 8px;font-size:clamp(18px,1.4vw,23px)}.thinking.show{display:flex}.thinking i{width:14px;height:14px;border-radius:50%;background:var(--mid);animation:blink .8s infinite alternate}.thinking span{color:#9ca5b4;font-size:13px}@keyframes blink{to{opacity:.35}}.answer{font-size:clamp(16px,1.35vw,22px);line-height:1.36;white-space:pre-wrap;margin:clamp(12px,1.8vh,18px) 8px;min-height:0;overflow:auto;flex:1}.answer strong{font-weight:700}.feedback{display:flex;align-items:center;gap:18px;margin:4px 8px 14px;flex:0 0 auto;visibility:hidden;opacity:0;transition:opacity .18s ease}.feedback.visible{visibility:visible;opacity:1}.feedback button{border:0;background:transparent;padding:0;cursor:pointer}.feedback img{height:24px;width:24px;object-fit:contain;display:block;opacity:.92}.feedback button:nth-child(1) img,.feedback button:nth-child(2) img,.feedback button:nth-child(3) img{opacity:.92;filter:none}.input{height:clamp(92px,13vh,122px);border:1px solid #aeb6c3;border-radius:18px;color:#a9b1c1;font-size:clamp(18px,1.4vw,24px);padding:clamp(20px,2vw,28px);position:relative;flex:0 0 auto}.input button{width:52px;height:46px;font-size:0;display:flex;align-items:center;justify-content:center;padding:0}.send-arrow{position:relative;display:block;width:25px;height:18px}.send-arrow:before{content:"";position:absolute;left:1px;top:8px;width:21px;height:2.5px;border-radius:2px;background:#9da6b5}.send-arrow:after{content:"";position:absolute;right:1px;top:3px;width:10px;height:10px;border-top:2.5px solid #9da6b5;border-right:2.5px solid #9da6b5;transform:rotate(45deg);transform-origin:center}.more{background:#f4f4f7;border-radius:20px;padding:clamp(24px,2.2vw,36px) clamp(20px,1.5vw,25px);height:max-content}.sparkles{width:clamp(44px,3.8vw,62px);height:auto}.more h2{font-size:clamp(22px,1.8vw,29px);margin:16px 0 10px}.more>b{display:block;font-size:clamp(16px,1.2vw,19px);margin-bottom:24px}.more button{width:100%;font-size:clamp(14px,1vw,17px);text-align:left}.more button:disabled{border-color:#b7bdc8;background:#d8dbe1;color:#8b929e;cursor:not-allowed;box-shadow:none;transform:none}.more button.ready{animation:promptPulse 1.15s ease-in-out infinite}
@media(max-width:900px){.topbar{height:74px}.home{height:auto;min-height:calc(100vh - 74px);padding:36px 24px}.home-prompts{grid-template-columns:1fr}.chat{height:auto;min-height:calc(100vh - 74px + 18px);padding:0 10px 12px;margin-top:-18px}.panel{height:auto;min-height:calc(100vh - 86px)}.layout{height:auto;grid-template-columns:1fr;padding:24px 20px}.more{order:-1}.answer{min-height:220px;overflow:visible}.panel-head{height:78px}.question{max-width:95%}}
@media(max-height:760px) and (min-width:901px){.topbar{height:72px}.home{height:calc(100vh - 72px);padding-top:24px}.lu-home{width:58px}.home h1{font-size:27px;margin:6px 0 12px}.askbox{height:160px;font-size:20px}.home-prompts{margin-top:14px}.chat{height:calc(100vh - 72px + 22px);margin-top:-22px}.panel-head{height:72px}.layout{height:calc(100% - 76px);padding-top:20px;padding-bottom:18px}.answer{font-size:15px}.input{height:82px}.more{padding-top:22px}}


/* V8 precision tweaks */
/* Align the four utility icons by their bottom edge. Avatar keeps its native centered treatment. */
.top-icons{display:flex;align-items:center;gap:0;height:100%;padding-bottom:0}
.top-icons>img{display:block;flex:0 0 auto;object-fit:contain}
.top-icons>img:not(.avatar){align-self:flex-end;margin-bottom:clamp(18px,1.75vw,27px)}
/* Equal optical spacing is based on the bell itself, not the 99+ badge extending to the right. */
.top-icons>img:nth-child(1){margin-right:clamp(20px,2.05vw,33px)}
.top-icons .bell-icon{height:clamp(52px,4.35vw,70px);width:auto;max-width:108px;margin-left:0;margin-right:clamp(8px,.8vw,13px)}
.top-icons>img:nth-child(3){margin-right:clamp(20px,2.05vw,33px)}
.top-icons>img:nth-child(4){margin-right:clamp(22px,2.2vw,36px)}
.top-icons .avatar{width:clamp(50px,5vw,82px);height:auto;max-width:none;align-self:center;margin:0}
.feedback{gap:16px}
.feedback button{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.feedback img{width:27px;height:27px;object-fit:contain;opacity:1}

/* V9 header spacing and send-arrow precision */
.top-icons{
  display:flex;
  align-items:center;
  gap:clamp(22px,2vw,32px);
  height:100%;
  padding-bottom:0;
}
.top-icons>img:not(.avatar){
  align-self:flex-end;
  margin-bottom:clamp(18px,1.75vw,27px);
}
.top-icons>img:nth-child(1),
.top-icons>img:nth-child(3),
.top-icons>img:nth-child(4){
  width:auto;
  height:clamp(28px,2.6vw,43px);
  margin-left:0;
  margin-right:0;
}
/* The bell artwork includes the 99+ badge. Negative side margins make its
   layout footprint track the bell body, so spacing reads evenly icon-to-icon. */
.top-icons .bell-icon{
  width:auto;
  height:clamp(52px,4.35vw,70px);
  max-width:108px;
  margin-left:clamp(-15px,-.9vw,-8px);
  margin-right:clamp(-15px,-.9vw,-8px);
}
/* Only the avatar is vertically centered in the bar. */
.top-icons .avatar{
  width:clamp(50px,5vw,82px);
  height:auto;
  max-width:none;
  align-self:center;
  margin:0;
}

/* Perfectly center the send arrow inside both message-box buttons. */
.askbox button,.input button{
  display:grid;
  place-items:center;
  padding:0;
}
.send-arrow{
  position:relative;
  display:block;
  width:26px;
  height:20px;
  transform:none;
}
.send-arrow:before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:22px;
  height:2.5px;
  border-radius:2px;
  background:#9da6b5;
  transform:translateY(-50%);
}
.send-arrow:after{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:9px;
  height:9px;
  border-top:2.5px solid #9da6b5;
  border-right:2.5px solid #9da6b5;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
}

/* V10: confirmed header geometry, one-line prompts, centered send arrows */
.top-icons{
  display:flex;
  align-items:center;
  gap:0;
  height:100%;
  padding:0;
}
.top-icons>img{display:block;object-fit:contain;flex:0 0 auto;margin:0!important;align-self:auto!important;max-width:none}
/* Reference: utility icons share one centerline and equal icon-body spacing. */
.top-icons>img:nth-child(1),
.top-icons>img:nth-child(3),
.top-icons>img:nth-child(4){
  width:clamp(30px,2.45vw,40px);
  height:clamp(30px,2.45vw,40px);
}
.top-icons>img:nth-child(1){margin-right:clamp(24px,2.35vw,38px)!important}
/* Bell PNG contains the floating 99+ badge. Give the artwork more width while
   using negative right compensation so the gap is measured from the bell body. */
.top-icons .bell-icon{
  width:clamp(58px,4.75vw,78px);
  height:clamp(43px,3.5vw,58px);
  object-fit:contain;
  margin-right:clamp(-4px,-.25vw,-2px)!important;
}
.top-icons>img:nth-child(3){margin-left:clamp(17px,1.55vw,25px)!important;margin-right:clamp(24px,2.35vw,38px)!important}
.top-icons>img:nth-child(4){margin-right:clamp(36px,3vw,50px)!important}
.top-icons .avatar{
  width:clamp(58px,5.15vw,84px);
  height:clamp(58px,5.15vw,84px);
  object-fit:contain;
  align-self:center!important;
}
/* Keep all prompt labels on one line. */
.home-prompts button,.more button{
  white-space:nowrap;
  line-height:1.1;
}
.home-prompts button{font-size:clamp(14px,1.18vw,20px);padding-left:clamp(10px,.9vw,15px);padding-right:clamp(10px,.9vw,15px)}
.more button{font-size:clamp(12px,.9vw,16px);padding-left:clamp(9px,.8vw,13px);padding-right:clamp(9px,.8vw,13px)}
/* Center arrow geometry independently of font metrics. */
.askbox button,.input button{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.send-arrow{position:relative;display:block;width:24px;height:16px;flex:0 0 24px}
.send-arrow:before{content:"";position:absolute;left:0;top:7px;width:21px;height:2.5px;border-radius:2px;background:#9da6b5;transform:none}
.send-arrow:after{content:"";position:absolute;right:0;top:2.5px;width:9px;height:9px;border-top:2.5px solid #9da6b5;border-right:2.5px solid #9da6b5;transform:rotate(45deg);transform-origin:center}
@media(max-width:1100px) and (min-width:901px){
  .home{padding-left:clamp(42px,7vw,80px);padding-right:clamp(42px,7vw,80px)}
  .home-prompts button{font-size:14px}
  .more button{font-size:12px}
}
@media(max-width:900px){
  .home-prompts button,.more button{white-space:normal}
}


/* V12: approved header composition + robust single-line prompt fitting */
.topbar{
  align-items:center;
}
.top-icons{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end;
  gap:clamp(30px,2.5vw,42px)!important;
  height:100%;
  padding:0!important;
  transform:translateY(clamp(-4px,-.28vw,-2px));
}
.utility-icons{
  display:flex;
  align-items:flex-end;
  gap:0;
}
.utility-icons>img{
  display:block;
  flex:0 0 auto;
  object-fit:contain;
  margin:0;
}
.utility-icons>img:nth-child(1),
.utility-icons>img:nth-child(3),
.utility-icons>img:nth-child(4){
  width:clamp(30px,2.45vw,40px);
  height:clamp(30px,2.45vw,40px);
}
.utility-icons>img:nth-child(1){margin-right:clamp(24px,2.35vw,38px)}
.utility-icons .bell-icon{
  width:clamp(58px,4.75vw,78px);
  height:clamp(43px,3.5vw,58px);
  max-width:none;
  margin-right:clamp(-4px,-.25vw,-2px);
  /* composite includes badge; this optical lift bottom-aligns the bell body */
  transform:translateY(clamp(-2px,-.12vw,-1px));
}
.utility-icons>img:nth-child(3){margin-left:clamp(17px,1.55vw,25px);margin-right:clamp(24px,2.35vw,38px)}
.top-icons .avatar{
  display:block;
  width:clamp(58px,5.15vw,84px)!important;
  height:clamp(58px,5.15vw,84px)!important;
  max-width:none!important;
  object-fit:contain;
  margin:0!important;
  align-self:center!important;
  position:static!important;
  transform:none!important;
}
.home-prompts button,.more button{
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:clip;
  max-width:100%;
}
.more button{
  display:block;
  min-width:0;
}
@media(max-width:900px){
  .top-icons{gap:18px!important;transform:none}
  .utility-icons>img:nth-child(1){margin-right:18px}
  .utility-icons>img:nth-child(3){margin-left:12px;margin-right:18px}
  .home-prompts button,.more button{white-space:nowrap!important}
}

/* V13: readable wrapped prompt labels */
.home-prompts button,.more button{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip;
  line-height:1.25;
  height:auto;
  min-height:clamp(50px,4.4vw,66px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.more button{
  justify-content:flex-start;
  font-size:clamp(14px,1vw,17px)!important;
  padding:clamp(12px,1vw,16px)!important;
  overflow-wrap:normal;
  word-break:normal;
}
.home-prompts button{
  font-size:clamp(16px,1.35vw,22px)!important;
}
@media(max-width:1100px) and (min-width:901px){
  .home-prompts button{font-size:14px!important}
  .more button{font-size:14px!important}
}
@media(max-width:900px){
  .home-prompts button,.more button{white-space:normal!important}
}

/* V15: move only the notification bell one additional step to the right. */
.utility-icons .bell-icon{
  position:relative;
  left:8px;
}

/* V16: show the selected prompt in the composer briefly before sending it into chat. */
.askbox span.entered,.input span.entered{color:var(--text);font-weight:500}



/* V17 designer screenshot refresh. Interaction logic is unchanged. */
:root{
  --dark:#39186a;
  --mid:#897ae9;
  --pale:#f5ecfd;
  --text:#30323a;
  --muted:#a5adba;
  --line:#b9c0cb;
  --soft:#f3f4f7;
}
html,body{width:100%;height:100%;overflow:hidden}
.demo{height:100vh;min-height:0;overflow:hidden}
.topbar{
  height:134px!important;
  background:var(--dark);
  padding:0 66px!important;
  display:grid!important;
  grid-template-columns:92px 1fr 92px;
  align-items:center!important;
  gap:20px;
}
.demo.chat-mode .topbar{background:#907cac}
.illumin-logo{width:80px!important;height:80px!important;object-fit:contain}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  color:#fff;
  font-size:24px;
  font-weight:700;
  white-space:nowrap;
}
.topbar>.avatar{
  width:88px!important;
  height:88px!important;
  object-fit:contain;
  justify-self:end;
  margin:0!important;
  transform:none!important;
}
.home{
  height:calc(100vh - 134px)!important;
  min-height:0!important;
  padding:58px max(40px,13.4vw) 24px!important;
  text-align:center;
}
.lu-home{width:100px!important;height:100px!important;object-fit:contain}
.home h1{
  margin:12px 0 56px!important;
  font-size:36px!important;
  line-height:1.15;
  font-weight:700;
}
.askbox{
  width:100%;
  height:218px!important;
  border:1px solid #aeb6c3;
  border-radius:18px;
  padding:25px 31px!important;
  font-size:28px!important;
}
.askbox button,.input button{
  right:27px!important;
  bottom:24px!important;
  width:64px!important;
  height:59px!important;
  border:0!important;
  border-radius:10px!important;
  background:#914bd2!important;
  box-shadow:0 3px 5px rgba(57,24,106,.18);
}
.askbox .send-arrow:before,.input .send-arrow:before{background:#fff!important}
.askbox .send-arrow:after,.input .send-arrow:after{border-color:#fff!important}
.home-prompts{
  gap:14px!important;
  margin-top:22px!important;
}
.home-prompts button{
  min-height:55px!important;
  padding:11px 16px!important;
  border:1px solid #9b83ff!important;
  border-radius:6px!important;
  background:#f7f1ff!important;
  font-size:22px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.chat{
  height:calc(100vh - 108px)!important;
  min-height:0!important;
  margin-top:-26px!important;
  padding:0 18px 18px!important;
  background:transparent!important;
  overflow:hidden;
  z-index:2;
}
.panel{
  height:100%!important;
  border:1px solid #b7bec9!important;
  border-radius:18px!important;
  background:#fff;
}
.panel-head{
  height:116px!important;
  padding:0 46px!important;
}
.brand{gap:20px!important;font-size:31px!important}
.brand img{width:61px!important;height:61px!important;object-fit:contain}
.close{
  font-size:52px!important;
  font-weight:300!important;
  color:#a6aeba!important;
  padding:0 3px!important;
}
.close.ready{background:transparent!important;animation:promptPulse 1.15s ease-in-out infinite}
.rule{height:2px!important;background:#eef0f4!important}
.layout{
  height:calc(100% - 118px)!important;
  grid-template-columns:minmax(0,2.35fr) minmax(370px,.98fr)!important;
  gap:38px!important;
  padding:35px 34px 29px 74px!important;
}
.conversation{min-height:0}
.question-row{
  min-height:72px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  gap:0;
  position:relative;
}
.question{
  margin-left:auto!important;
  margin-right:0!important;
  max-width:78%!important;
  padding:13px 16px!important;
  border-radius:4px!important;
  background:#eef1f5!important;
  font-size:24px!important;
  line-height:1.25!important;
}
.question-copy{
  width:27px;
  height:27px;
  object-fit:contain;
  position:absolute;
  right:13px;
  top:76px;
}
.thinking{
  margin:20px 0 10px 0!important;
  font-size:22px!important;
}
.thinking i,.thought-process i{
  width:14px;height:14px;border-radius:50%;background:#aeb7c4;display:block;flex:0 0 auto;
}
.thinking i{animation:blink .8s infinite alternate;background:var(--mid)}
.thought-process{
  display:none;
  align-items:center;
  gap:12px;
  margin:12px 0 14px 0;
  font-size:22px;
  flex:0 0 auto;
}
.thought-process.show{display:flex}
.thought-process span{color:#9ca5b4;font-size:13px}
.answer{
  margin:0!important;
  font-size:23px!important;
  line-height:1.36!important;
  padding-right:10px;
}
.feedback{
  gap:18px!important;
  margin:8px 0 16px!important;
}
.feedback button{width:28px!important;height:28px!important}
.feedback img{width:27px!important;height:27px!important}
.input{
  height:123px!important;
  border:1px solid #aeb6c3!important;
  border-radius:18px!important;
  padding:25px 28px!important;
  font-size:23px!important;
}
.input button{
  width:64px!important;
  height:59px!important;
  right:15px!important;
  bottom:15px!important;
}
.more{
  background:#f4f4f7!important;
  border-radius:20px!important;
  padding:26px 25px!important;
  margin-top:0;
  min-height:284px;
}
.sparkles{width:62px!important;height:auto}
.more h2{
  margin:17px 0 10px!important;
  font-size:29px!important;
  line-height:1.2!important;
}
.more>b{
  margin-bottom:27px!important;
  font-size:19px!important;
}
.more button{
  min-height:48px!important;
  padding:11px 12px!important;
  border:1px solid #9b83ff!important;
  border-radius:6px!important;
  background:#f7f1ff!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:700!important;
  justify-content:flex-start!important;
}
.more button:disabled{
  background:#aeb5c2!important;
  color:#fff!important;
  border-color:#9b83ff!important;
}
@media(max-width:1300px){
  .topbar{height:104px!important;padding:0 42px!important;grid-template-columns:72px 1fr 72px}
  .illumin-logo{width:64px!important;height:64px!important}
  .topbar>.avatar{width:70px!important;height:70px!important}
  .main-nav{font-size:18px;gap:18px}
  .home{height:calc(100vh - 104px)!important;padding-top:38px!important}
  .lu-home{width:78px!important;height:78px!important}
  .home h1{font-size:30px!important;margin-bottom:30px!important}
  .askbox{height:180px!important;font-size:23px!important}
  .home-prompts button{font-size:17px!important}
  .chat{height:calc(100vh - 82px)!important;margin-top:-22px!important}
  .panel-head{height:90px!important}
  .layout{height:calc(100% - 92px)!important;padding:25px 28px 22px 54px!important;gap:28px!important;grid-template-columns:minmax(0,2.25fr) minmax(300px,.92fr)!important}
  .brand{font-size:25px!important}.brand img{width:50px!important;height:50px!important}
  .question{font-size:18px!important}.question-copy{top:60px;width:23px;height:23px}
  .thinking,.thought-process{font-size:18px!important}
  .answer{font-size:17px!important}
  .input{height:96px!important;font-size:18px!important}
  .more{min-height:235px;padding:20px!important}
  .sparkles{width:48px!important}.more h2{font-size:23px!important}.more>b{font-size:16px!important;margin-bottom:18px!important}.more button{font-size:14px!important}
}
@media(max-width:900px){
  html,body{overflow:auto}
  .demo{height:auto;min-height:100vh}
  .topbar{grid-template-columns:60px 1fr 60px;height:80px!important;padding:0 20px!important}
  .illumin-logo{width:52px!important;height:52px!important}.topbar>.avatar{width:56px!important;height:56px!important}
  .main-nav{gap:10px;font-size:12px;overflow:hidden}
  .home{height:auto!important;min-height:calc(100vh - 80px)!important;padding:32px 24px!important}
  .chat{height:auto!important;min-height:calc(100vh - 64px)!important;margin-top:-16px!important;padding:0 10px 12px!important}
  .panel{min-height:calc(100vh - 76px)}
  .layout{height:auto!important;grid-template-columns:1fr!important;padding:24px 20px!important}
  .more{order:-1}
  .answer{min-height:220px}
}



/* V18: exact designer asset + top-nav sizing corrections */
.topbar{
  height:156px!important;
  padding:0 81px!important;
  grid-template-columns:96px 1fr 104px!important;
}
.illumin-logo{
  width:94px!important;
  height:94px!important;
}
.main-nav{
  gap:28px!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:700!important;
}
.topbar>.avatar{
  width:102px!important;
  height:102px!important;
}

/* New Lu artwork supplied by design. Preserve its transparent canvas and aspect ratio. */
.lu-home{
  width:112px!important;
  height:112px!important;
  object-fit:contain!important;
}
.brand img{
  width:66px!important;
  height:66px!important;
  object-fit:contain!important;
}

/* Use the supplied submit-button artwork itself instead of rebuilding the arrow in CSS. */
.askbox button,.input button{
  background:#914bd2 url("assets/icons/submit-designer.png") center/100% 100% no-repeat!important;
  width:64px!important;
  height:64px!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  box-shadow:none!important;
}
.askbox .send-arrow,.input .send-arrow{display:none!important}

/* Keep the home composition aligned after the taller reference nav. */
.home{
  height:calc(100vh - 156px)!important;
  padding-top:56px!important;
}
.chat{
  height:calc(100vh - 130px)!important;
  margin-top:-26px!important;
}

/* Scale down cleanly on smaller screens while retaining the same proportions. */
@media(max-width:1500px){
  .topbar{height:122px!important;padding:0 62px!important;grid-template-columns:78px 1fr 82px!important}
  .illumin-logo{width:74px!important;height:74px!important}
  .main-nav{font-size:22px!important;gap:22px!important}
  .topbar>.avatar{width:80px!important;height:80px!important}
  .home{height:calc(100vh - 122px)!important;padding-top:42px!important}
  .chat{height:calc(100vh - 100px)!important;margin-top:-22px!important}
}
@media(max-width:1100px){
  .topbar{height:96px!important;padding:0 34px!important;grid-template-columns:62px 1fr 66px!important}
  .illumin-logo{width:58px!important;height:58px!important}
  .main-nav{font-size:16px!important;gap:14px!important}
  .topbar>.avatar{width:64px!important;height:64px!important}
  .home{height:calc(100vh - 96px)!important}
}

/* V19: requested nav-only adjustment. No other UI changes. */
.main-nav{
  font-size:27px!important;
  transform:translateX(20px);
}
@media(max-width:1500px){
  .main-nav{font-size:20px!important;transform:translateX(20px)}
}
@media(max-width:1100px){
  .main-nav{font-size:14px!important;transform:translateX(20px)}
}

/* V20: move only the navigation labels three additional steps right. */
.main-nav{transform:translateX(50px)!important;}
@media(max-width:1500px){.main-nav{transform:translateX(50px)!important;}}
@media(max-width:1100px){.main-nav{transform:translateX(50px)!important;}}

/* V21: move only the primary navigation group close to the HS avatar. */
@media(min-width:1301px){
  .main-nav{
    justify-content:flex-end!important;
    transform:translateX(38px)!important;
  }
}
@media(min-width:901px) and (max-width:1300px){
  .main-nav{
    justify-content:flex-end!important;
    transform:translateX(28px)!important;
  }
}

/* V22: keep nav close to HS with a protected clear gap; no overlap. */
@media(min-width:1301px){
  .main-nav{
    justify-content:flex-end!important;
    transform:translateX(-18px)!important;
  }
}
@media(min-width:901px) and (max-width:1300px){
  .main-nav{
    justify-content:flex-end!important;
    transform:translateX(-12px)!important;
  }
}